ampproject · samouri · Nov 1, 2021 · Sep 14, 2021 · Oct 1, 2021 · Oct 1, 2021
diff --git a/demo/hello-world/index.html b/demo/hello-world/index.html
@@ -34,4 +34,4 @@
     }, false);
   </script> -->
 </body>
-</html>
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -27,6 +27,7 @@ <h3>Basic</h3>
     <li><a href='iframe/'>Iframed storage</a></li>
     <li><a href='sandboxed/'>Sandboxed Worker (via iframe)</a></li>
     <li><a href='scroll-into-view/'>Scroll into view</a></li>
+    <li><a href='shadow-root/'>Shadow Root</a></li>
   </ul>
 
   <h3>Frameworks</h3>

diff --git a/demo/shadow-dom/index.html b/demo/shadow-dom/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Shadow Root</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="/demo.css" rel="stylesheet">
+  <script src="/dist/main.mjs" type="module"></script>
+  <script src="/dist/main.js" nomodule defer></script>
+  <!-- This comment block is intended to make it easier to test both the script module and nomodule path -->
+  <!-- Comment either block to enable module/nomodule or disable it. -->
+  <!-- <script src="/dist/main.js" defer></script> -->
+</head>
+<body>
+  <div>Host Element</div>
+  <div src="shadow-dom.js" id="upgrade-me" data-shadow-dom>
+    <div id="root">
+      <div>Guest Element</div>
+      <button>Insert style tag</button>
+    </div>
+  </div>
+  <script type="module">
+    import {upgradeElement} from '/dist/main.mjs';
+    upgradeElement(document.getElementById('upgrade-me'), '/dist/worker/worker.mjs');
+  </script>
+  <!-- This comment block is intended to make it easier to test both the script module and nomodule path -->
+  <!-- Comment either block to enable module/nomodule or disable it. -->
+  <!-- <script async=false defer>
+    document.addEventListener('DOMContentLoaded', function() {
+      MainThread.upgradeElement(document.getElementById('upgrade-me'), './dist/worker/worker.js');
+    }, false);
+  </script> -->
+</body>
+</html>
diff --git a/demo/shadow-dom/shadow-dom.js b/demo/shadow-dom/shadow-dom.js
@@ -0,0 +1,7 @@
+const btn = document.getElementsByTagName('button')[0];
+
+btn.addEventListener('click', async () => {
+  const style = document.createElement('style');
+  style.textContent = `* { color: red !important }`;
+  document.body.appendChild(style);
+});
diff --git a/src/main-thread/install.ts b/src/main-thread/install.ts
@@ -37,6 +37,13 @@ export function install(
   baseElement: HTMLElement,
   config: InboundWorkerDOMConfiguration,
 ): Promise<ExportedWorker | null> {
+  const mode = baseElement.dataset['shadowDom'];
+  if (mode != null) {
+    const shadowRoot = baseElement.attachShadow({ mode: (mode || 'open') as ShadowRootMode });
+    const clonedElement = baseElement.cloneNode(true) as HTMLElement;
+    shadowRoot.appendChild(clonedElement);
+    baseElement = clonedElement;
+  }
   const stringContext = new StringContext();
   const objectContext = new ObjectContext();
   const nodeContext = new NodeContext(stringContext, baseElement);
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,4 +34,4 @@ @@
         }, false);
       </script> -->
     </body>
-    </html>
+    </html>