深入探讨 Web Components 的 Shadow DOM V1 与 V0 版本在样式隔离、事件重定向和内容分发方面的差异。

各位前端的弄潮儿们，早上好/下午好/晚上好！（取决于你刷到这篇文章的时间啦~）

今天咱们来聊聊Web Components里一个非常重要的概念：Shadow DOM。准确地说，是Shadow DOM的V1和V0这两代“宫斗剧”里的胜负手，看看它们在样式隔离、事件重定向和内容分发这三个关键环节都有哪些爱恨情仇。

准备好了吗？咱们这就开始！

第一幕：Shadow DOM 是个啥？为什么要搞个V1出来？

在Web Components的世界里，Shadow DOM就像一个隐形的结界，它允许我们创建一个独立的、封装的DOM子树，与主文档（Light DOM）隔离开来。 想象一下，你造了一个积木城堡，Shadow DOM就是给这个城堡围了一圈城墙，里面的积木再怎么折腾，也不会影响到外面的世界，反之亦然。

为什么要搞这么个东西呢？

• 样式隔离： 避免全局样式污染，让你的组件样式只在自己的小天地里生效，不会被其他地方的CSS乱入。
• 结构封装： 隐藏组件内部的实现细节，外部世界只能通过组件暴露的API来操作，就像一个黑盒子。
• 避免命名冲突： 组件内部可以使用任意的class和id，不用担心和外部的元素重名。

V0版本是Shadow DOM的早期版本，虽然也能实现一些基本的功能，但设计上存在一些缺陷，导致使用起来比较麻烦，而且浏览器支持也不太好。所以，W3C就推出了V1版本，对V0进行了改进和标准化，让Web Components更加强大和易用。

第二幕：样式隔离：谁才是真正的“防火墙”？

样式隔离是Shadow DOM的核心功能之一。V1和V0在这方面的表现还是有区别的。

V0的样式隔离：

V0的样式隔离是通过createShadowRoot()方法创建的Shadow DOM来实现的。

<my-element></my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      this.shadow = this.attachShadow({ mode: 'open' }); // V1的方式创建，但用在V0环境
      this.shadow.innerHTML = `
        <style>
          :host {
            display: block;
            color: blue;
          }
          .inner {
            color: red;
          }
        </style>
        <div class="inner">Hello Shadow DOM V0</div>
      `;
    }
  }
  customElements.define('my-element', MyElement);
</script>

<style>
  my-element {
    color: green; /* 尝试覆盖组件的颜色 */
  }
  .inner {
    color: purple; /* 尝试覆盖组件内部元素的颜色 */
  }
</style>

在V0中， :host伪类选择器用于选择宿主元素（也就是<my-element>）。但是，外部样式仍然有可能通过一些方式影响到Shadow DOM内部的元素，例如使用!important或者非常具体的选择器。

V1的样式隔离：

V1使用attachShadow({mode: 'open' | 'closed'})方法来创建Shadow DOM。

<my-element></my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      this.shadow = this.attachShadow({ mode: 'open' }); // V1 创建Shadow DOM
      this.shadow.innerHTML = `
        <style>
          :host {
            display: block;
            color: blue;
          }
          .inner {
            color: red;
          }
        </style>
        <div class="inner">Hello Shadow DOM V1</div>
      `;
    }
  }
  customElements.define('my-element', MyElement);
</script>

<style>
  my-element {
    color: green; /* 尝试覆盖组件的颜色 */
  }
  .inner {
    color: purple; /* 尝试覆盖组件内部元素的颜色 */
  }
</style>

V1的样式隔离更加彻底，外部样式很难穿透Shadow DOM。除非使用CSS变量（Custom Properties），才有可能有限地影响Shadow DOM内部的样式。

总结：

特性	V0	V1
创建方式	element.createShadowRoot()	element.attachShadow({mode: 'open' | 'closed'})
隔离程度	相对较弱，外部样式有可能通过!important等方式影响内部样式。	更强，外部样式更难穿透，只能通过CSS变量有限地影响内部样式。
兼容性	较差，部分浏览器已经废弃。	更好，是标准的Web Components API。

第三幕：事件重定向：谁能掌控事件的流向？

事件重定向是指当Shadow DOM内部的元素触发事件时，事件是如何传递到外部的。

V0的事件重定向：

在V0中，事件会“穿透”Shadow DOM，直接冒泡到主文档中。但是，事件的目标元素会被重定向为宿主元素。

例如，如果在Shadow DOM内部的一个按钮上点击，那么在主文档中监听click事件时，事件的目标元素会是<my-element>，而不是那个按钮。

<my-element></my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      this.shadow = this.attachShadow({ mode: 'open' }); // V1的方式创建，但用在V0环境
      this.shadow.innerHTML = `
        <button id="myButton">Click Me</button>
      `;
      this.shadow.getElementById('myButton').addEventListener('click', (event) => {
        console.log('Button clicked inside Shadow DOM V0');
      });
    }
  }
  customElements.define('my-element', MyElement);

  document.addEventListener('click', (event) => {
    console.log('Click event target V0:', event.target); // 输出 <my-element>
  });
</script>

V1的事件重定向：

V1的事件重定向更加灵活，可以通过composed属性来控制事件是否穿透Shadow DOM。

• composed: true：事件可以穿透Shadow DOM，冒泡到主文档中，事件的目标元素会被重定向为宿主元素。
• composed: false：事件不会穿透Shadow DOM，只会在Shadow DOM内部传播。

<my-element></my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      this.shadow = this.attachShadow({ mode: 'open' }); // V1 创建Shadow DOM
      this.shadow.innerHTML = `
        <button id="myButton">Click Me</button>
      `;
      this.shadow.getElementById('myButton').addEventListener('click', (event) => {
        console.log('Button clicked inside Shadow DOM V1');
      });
    }
  }
  customElements.define('my-element', MyElement);

  document.addEventListener('click', (event) => {
    console.log('Click event target V1:', event.target); // 输出 <my-element>
  });
</script>

总结：

特性	V0	V1
事件穿透	事件总是穿透Shadow DOM，冒泡到主文档。	可以通过composed属性控制事件是否穿透Shadow DOM。
目标元素重定向	事件的目标元素总是被重定向为宿主元素。	事件的目标元素会被重定向为宿主元素，如果composed: false，则事件不会穿透Shadow DOM。
灵活性	较低，无法控制事件的传播。	更高，可以通过composed属性灵活控制事件的传播。

第四幕：内容分发：谁才是真正的“内容之王”？

内容分发是指如何将Light DOM中的内容插入到Shadow DOM中。

V0的内容分发：

V0使用<content>元素来实现内容分发。 <content>元素可以根据select属性选择Light DOM中的元素，并将它们插入到Shadow DOM中。

<my-element>
  <span slot="name">张三</span>
  <p>这是段描述。</p>
</my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      this.shadow = this.attachShadow({ mode: 'open' }); // V1的方式创建，但用在V0环境
      this.shadow.innerHTML = `
        <style>
          .name {
            font-weight: bold;
          }
        </style>
        <div class="name"><content select="[slot='name']"></content></div>
        <div><content select="p"></content></div>
      `;
    }
  }
  customElements.define('my-element', MyElement);
</script>

在上面的例子中，<content select="[slot='name']"></content>会将Light DOM中slot属性为name的元素（也就是<span>张三</span>）插入到Shadow DOM中的div.name元素中。<content select="p"></content>会将Light DOM中的p元素插入到Shadow DOM中的另一个div元素中。

V1的内容分发：

V1使用<slot>元素来实现内容分发。 <slot>元素可以定义一个插槽，Light DOM中的元素可以通过slot属性指定要插入到哪个插槽中。

<my-element>
  <span slot="name">张三</span>
  <p>这是段描述。</p>
</my-element>

<script>
  class MyElement extends HTMLElement {
    constructor() {
      super();
      this.shadow = this.attachShadow({ mode: 'open' }); // V1 创建Shadow DOM
      this.shadow.innerHTML = `
        <style>
          .name {
            font-weight: bold;
          }
        </style>
        <div class="name"><slot name="name"></slot></div>
        <div><slot></slot></div>
      `;
    }
  }
  customElements.define('my-element', MyElement);
</script>

在上面的例子中，<slot name="name"></slot>定义了一个名为name的插槽，Light DOM中slot属性为name的元素（也就是<span>张三</span>）会被插入到这个插槽中。<slot></slot>定义了一个默认插槽，Light DOM中没有指定slot属性的元素（也就是<p>这是段描述。</p>）会被插入到这个默认插槽中。

总结：

特性	V0	V1
使用元素	<content>	<slot>
选择方式	使用select属性选择元素。	使用slot属性指定元素要插入的插槽。
默认插槽	没有明确的默认插槽概念。	可以使用没有name属性的<slot>定义默认插槽。
灵活性	相对较低，选择器语法可能比较复杂。	更高，使用插槽的概念更加直观和易于理解。

第五幕：一个完整的例子，让你彻底搞懂V1的Shadow DOM

<!DOCTYPE html>
<html>
<head>
  <title>Shadow DOM V1 Example</title>
</head>
<body>

  <my-card title="我的卡片">
    <p>这是卡片的内容。</p>
    <button slot="footer">确定</button>
    <button slot="footer">取消</button>
  </my-card>

  <script>
    class MyCard extends HTMLElement {
      constructor() {
        super();
        this.shadow = this.attachShadow({ mode: 'open' });
        this.shadow.innerHTML = `
          <style>
            .card {
              border: 1px solid #ccc;
              padding: 10px;
              margin-bottom: 10px;
              box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
            }
            .card-title {
              font-size: 1.2em;
              font-weight: bold;
              margin-bottom: 5px;
            }
            .card-content {
              margin-bottom: 10px;
            }
            .card-footer {
              display: flex;
              justify-content: flex-end;
            }
          </style>
          <div class="card">
            <div class="card-title"><slot name="title"></slot></div>
            <div class="card-content"><slot></slot></div>
            <div class="card-footer"><slot name="footer"></slot></div>
          </div>
        `;
      }

      connectedCallback() {
        // 在组件插入到DOM时，设置标题
        if (!this.hasAttribute('title')) {
            const titleElement = document.createElement('span');
            titleElement.textContent = "默认标题";
            titleElement.setAttribute('slot', 'title');
            this.appendChild(titleElement);
        } else {
            const titleText = this.getAttribute('title');
            const titleElement = document.createElement('span');
            titleElement.textContent = titleText;
            titleElement.setAttribute('slot', 'title');
            this.appendChild(titleElement);
            this.removeAttribute('title');
        }
      }

      static get observedAttributes() {
        return ['title'];
      }

      attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'title') {
          // 当title属性改变时，更新slot
          const titleSlot = this.shadow.querySelector('slot[name="title"]');
          if (titleSlot) {
              // 移除原来的title元素
              while (titleSlot.assignedNodes().length > 0) {
                  titleSlot.assignedNodes()[0].remove();
              }

              // 创建新的title元素
              const titleElement = document.createElement('span');
              titleElement.textContent = newValue;
              titleElement.setAttribute('slot', 'title');
              this.appendChild(titleElement);
          }
        }
      }
    }

    customElements.define('my-card', MyCard);
  </script>

</body>
</html>

这个例子创建了一个名为my-card的自定义元素，它使用Shadow DOM V1来封装内部结构和样式。

• title属性和<slot name="title"></slot>：允许外部设置卡片的标题。
• 默认插槽<slot></slot>：允许外部插入卡片的内容。
• footer插槽<slot name="footer"></slot>：允许外部插入卡片的底部按钮。
• connectedCallback方法：在组件插入到DOM时，设置标题。
• attributeChangedCallback方法：监听title属性的变化，并更新slot。

第六幕：V1的优势和注意事项

V1的优势：

• 标准化： V1是标准的Web Components API，得到了浏览器的广泛支持。
• 更强的隔离性： V1的样式隔离更加彻底，避免了全局样式污染。
• 更灵活的事件处理： V1可以通过composed属性灵活控制事件的传播。
• 更直观的内容分发： V1使用插槽的概念更加直观和易于理解。

使用V1的注意事项：

• 浏览器兼容性： 虽然V1得到了广泛支持，但仍然需要考虑旧版本浏览器的兼容性，可以使用polyfill来解决。
• 学习成本： 掌握Shadow DOM的概念和API需要一定的学习成本。
• 调试： Shadow DOM内部的元素在浏览器的开发者工具中可能不太容易调试，需要使用一些技巧。

最终幕：总结

Shadow DOM V1相比V0，在样式隔离、事件重定向和内容分发方面都有了很大的改进，更加强大和易用。掌握Shadow DOM V1是开发高质量Web Components的关键。

希望今天的分享能够帮助你更好地理解Shadow DOM V1和V0的区别，并在实际开发中灵活运用。

祝大家编程愉快！下次再见！