Custom Element in Shadow DOM

Custom Element in Shadow DOM

by Mike Jacobson

HTML

<template id="mjj-custom">
  <style>
    p {
      color: blue;
    }
  </style>
  <p>
  Hi Mike!
  </p>
</template>

<p>
Other Para...
</p>
<mjj-custom></mjj-custom>

JavaScript

const tmpl = document.getElementById('mjj-custom');

customElements.define('mjj-custom', class extends HTMLElement {
	constructor() {
  	super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(tmpl.content.cloneNode(true));
  }

});