使用 Shadow DOM

添加一个类型为 ShadowRootInit 的静态属性 shadowRootInit（参见 MDN 上的选项说明），即可为整个组件选用 Shadow DOM。

现在就试试 在 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)