<!DOCTYPE html>
<html>
<head>
<!-- web components polyfills -->
<script src="//unpkg.com/@webcomponents/custom-elements"></script>
<script src="//unpkg.com/@webcomponents/shadydom"></script>
<link rel="stylesheet" href="//unpkg.com/@webcomponents/shadycss">
</head>
<body>
<template id="app-drawer">
<slot></slot>
<style>
p {
color: orange;
}
</style>
<p>I'm in Shadow DOM. My markup was stamped from a <template>.</p>
</template>
<script>
customElements.define('app-drawer', class extends HTMLElement {
constructor() {
super(); // always call super() first in the ctor.
let shadowRoot = this.attachShadow({
mode: 'open'
});
const t = document.querySelector('#app-drawer');
const instance = t.content.cloneNode(true);
shadowRoot.appendChild(instance);
}
});
</script>
<app-drawer>Transcluded</app-drawer>
</body>
</html>