Using the Shadow DOM

Add a static property shadowRootInit with object value of type ShadowRootInit (see options on MDN) to opt-in to using shadow dom for the whole component.

Try it now on CodePen ↗

Example:

class ShadowElement extends WebComponent {
  static shadowRootInit = {
    mode: 'open', // can be 'open' or 'closed'
  }

  get template() {
    return html`
      <div>
        <p>Wow!?</p>
      </div>
    `
  }
}

customElements.define('shadow-element', ShadowElement)