声明式 Shadow DOM

本文已整理到 Github，地址 👉 blog。

如果我的内容帮助到了您，欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~

我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。

Shadow DOM 在 Web 组件的世界中扮演着重要的角色，因为它们提供了一种简单的封装方式，但它是使用 JavaScript 强制创建的，具有以下特性：

class FancyElement extends HTMLElement {
  constructor() {
    super()
    this.ShadowRoot = this.attachShadow({ mode: 'open' })
    this.ShadowRoot.innerHTML = 'Shadow DOM imperative'
  }
}

customElements.get('imperative-fancy-element') ||
customElements.define('imperative-fancy-element', FancyElement)

嗯，这对仅客户端的应用程序很有效，但是在服务器（SSR）上表达和构建它们有很多挑战，当声明性阴影出现时！

声明式 Shadow DOM（DSD）帮助我们轻松地将 Shadow DOM 发送到服务器，上面的示例命令式示例如下所示：

<imperative-fancy-element>
  <h1>Imperative Shadow DOM</h1>
</imperative-fancy-element>

<fancy-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Declarative Shadow DOM</h2>
</fancy-element>

注意：chrome://flags/#enable-experimental-web-platform-features 应在浏览器启用才能使用此功能。