Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement