Last active
October 4, 2023 18:57
-
-
Save robdodson/287030402bad4b496a0361314138f0f9 to your computer and use it in GitHub Desktop.
Shady DOM example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title></title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <h2>Hello from outside the Shadow DOM!</h2> | |
| <!-- This Custom Element will be our Shadow Host and contain the Shadow Root. --> | |
| <my-element></my-element> | |
| <!-- This template will hold the implementation for our element. --> | |
| <template id="tmpl"> | |
| <style> | |
| h2 { | |
| color: blue; | |
| } | |
| </style> | |
| <h2>Hello from inside the Shadow DOM!</h2> | |
| </template> | |
| <!-- | |
| Just load the polyfills for Custom Elements, Shady DOM, and Shady CSS. | |
| The Shady CSS polyfill only supports Custom Elements. Since we need | |
| both the Custom Elements and Shady polyfills, may as well load the bundle! | |
| --> | |
| <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-sd-ce.js"></script> | |
| <script> | |
| // prepareTemplate takes the template and applies the scoping attributes | |
| // to each element and puts styles in the <head>. | |
| ShadyCSS.prepareTemplate(tmpl, 'my-el'); | |
| class MyElement extends HTMLElement { | |
| connectedCallback() { | |
| // styleElement enables Custom Properties to work on this element | |
| // and any of its children. | |
| ShadyCSS.styleElement(this); | |
| this.attachShadow({mode: 'open'}); | |
| this.shadowRoot.appendChild(tmpl.content.cloneNode(true)); | |
| } | |
| } | |
| customElements.define('my-element', MyElement); | |
| </script> | |
| </body> | |
| </html> |
I continuously come back to this code when I need a simple custom element with shadow DOM for testing. Good that I made the demo :-D
Back again xD
May be for you. What we can do without the file !!
./node_modules/@webcomponents/webcomponentsjs/webcomponents-sd-ce.js
Same with the exemple , 404
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-sd-ce.js"></script>Ciao
Replace line 29 & it will work.
<script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-sd-ce.js"></script>
<script src="https://unpkg.com/@webcomponents/[email protected]/bundles/webcomponents-sd-ce.js"></script>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Demo: https://output.jsbin.com/disoruq/quiet