Paggamit ng Shadow DOM

Magdagdag ng static property na shadowRootInit na may object value ng uri ShadowRootInit (tingnan ang mga option sa MDN) para mag-opt-in sa paggamit ng shadow dom para sa buong component.

Subukan ito ngayon sa CodePen ↗, o tingnan ito nang live: Shadow DOM demo ↗

Halimbawa:

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)