Shadow Dom

by amindunited

HTML

<plain-webcomponent>
  This is slotted content
</plain-webcomponent>

JavaScript

class PlainWebComponent extends HTMLElement {
  constructor () {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
  }

  render () {
    const fragment = document.createDocumentFragment();
    const container = document.createElement('div');
		container.innerHTML = `
      <p>Here's some text - above</p>
      <slot></slot>
      <p>Here's some text - below</p>
		`;
    fragment.appendChild(container);
		this.shadow.appendChild(fragment);
    // if you don't want to use the shadow DOM:
    // this.appendChild(fragment);
  }

  // the custom element is added to the DOM.
  connectedCallback () { this.render(); }

}

customElements.define('plain-webcomponent', PlainWebComponent);