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.