<!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>