From d42fbc0e40311de914135ce262c011059560d04d Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Wed, 27 Dec 2023 12:52:01 +0100
Subject: [PATCH] chore: mention shadow dom usage on readme

---
 README.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/README.md b/README.md
index b9cca97..73ac704 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,7 @@ The result is a reactive UI on property changes. [View on CodePen ↗](https://c
 1. [Prop access](#prop-access)
     1. [Alternatives](#alternatives)
 1. [Styling](#styling-beta)
+1. [Shadow DOM Opt-In](#shadow-dom-opt-in-beta)
 1. [Just the Templating](#just-the-templating)
 1. [Quick Start Example](#quick-start-example)
 1. [Life-Cycle Hooks](#life-cycle-hooks)
@@ -237,6 +238,19 @@ class StyledElements extends WebComponent {
 customElements.define("styled-elements", StyledElements);
 ```
 
+## Shadow DOM Opt-In (beta)
+Add a static property `shadowRootInit` with object value of type `ShadowRootInit` (see [options on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options)) to opt-in to using shadow dom for the whole component.
+
+Try it now [on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/VwRYVPv?editors=1010)
+
+Example:
+```js
+  static shadowRootInit = {
+    mode: "closed",
+  };
+```
+
+
 ## Just the Templating
 
 You don't have to extend the whole base class just to use some features. All internals are exposed and usable separately so you can practically build the behavior on your own classes.