Shady DOM example
<!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> |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
Back again xD |
This comment has been minimized.
This comment has been minimized.
May be for you. What we can do without the file !! Same with the exemple , 404 <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-sd-ce.js"></script>Ciao |
This comment has been minimized.
This comment has been minimized.
Replace line 29 & it will work. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Demo: https://output.jsbin.com/disoruq/quiet