Merge pull request #29 from Monsido/anh/opti-11125/investigate-shadow-dom-support

OPTI-11125 add nested shadow dom with style rule example

Author: anhnicky66

build/serve.mjs

@@ -16,7 +16,7 @@ const ctx = await esbuild.context(settings);
 await ctx.watch();
 
 const { port } = await ctx.serve({
-  port: 5000,
+  port: 8000,
   servedir: 'www',
   fallback: 'index.html',
 });

dist/index.cjs.js

@@ -28,4 +28,5 @@ export declare class DataCollector {
     private removeDefaultStyles;
     private getAttributesList;
     private cleanUpText;
+    private escapeQuotation;
 }

dist/index.js

@@ -34,7 +34,7 @@
         }
         customElements.define('my-element', MyElement);
     </script>
-    <script type="module">  
+    <script type="module">
         import { DataCollector } from './index.js';
 
         async function collectData () {
@@ -56,7 +56,17 @@ <h2>Data collector</h2>
         <pre id="data_collector_output"></pre>
         <my-element>
             <div slot="main">This is a custom element</div>
+            <p class="nest-text-red">with some content</p>
+        </my-element>
+        <my-element>
+            <div slot="main">
+                <my-element>
+                    <style>.nest-text-red { color: red; }</style>
+                    <div slot="main" class="nest-text-red">This is a nested custom element</div>
+                    <p>with some content</p>
+                </my-element>
+            </div>
             <p>with some content</p>
         </my-element>
 </body>
-</html>
+</html>