Shadow DOMを使う

コンポーネント全体でShadow DOMを使うようにオプトインするには、ShadowRootInit 型のオブジェクト値を持つ静的プロパティ shadowRootInit を追加します（MDNのオプション一覧を参照）。

今すぐ試す: CodePenで ↗、あるいは実際に動く様子はこちら: Shadow DOMデモ ↗

例:

class ShadowElement extends WebComponent {
  static shadowRootInit = {
    mode: 'open', // 'open' または 'closed' を指定できます
  }

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

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