Web Components Shadow DOM 的样式隔离与通信 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，朋友们，各位技术大咖、萌新小白、以及被迫营业的摸鱼达人们，晚上好！我是你们的老朋友，人见人爱的 Bug 消灭者，代码界的段子手——“码农老王”！

今天，咱们不聊高深的算法，不谈复杂的架构，就来聊聊 Web Components 里那些“小而美”的秘密：Shadow DOM 的样式隔离与通信。

想象一下，你盖了一栋别墅（网页），想把客厅（一个自定义组件）装修得金碧辉煌，充满着凡尔赛的气息。但是，你又不想影响到隔壁老王家（网站其他部分）那朴素的田园风格。这时候，Shadow DOM 就闪亮登场，化身你的私人设计师，确保你的客厅再怎么放飞自我，都不会影响到老王家的装修。

一、Shadow DOM：我的地盘我做主！🏰

首先，我们得搞清楚 Shadow DOM 到底是个什么玩意儿。简单来说，它就像在你的 Web Component 上创建了一个“影子”DOM 树。这个“影子”DOM 树完全独立于主 DOM 树，拥有自己的样式和行为，就像一个被玻璃罩罩住的小世界。

为什么要这么做呢？因为在 Web Components 出现之前，前端开发人员经常会遇到这样的噩梦：

全局样式污染： 你的组件样式一不小心就影响到了整个页面，导致页面样式错乱，简直就是一场 CSS 灾难！🤯
脚本冲突： 不同的 JavaScript 库或组件之间可能会发生冲突，导致功能失效，让你怀疑人生。😭

Shadow DOM 的出现，就是为了解决这些问题。它提供了一种强大的样式隔离和行为封装机制，让你的 Web Components 可以像独立的个体一样存在，互不干扰。

二、样式隔离：筑起一道坚固的防火墙 🔥

样式隔离是 Shadow DOM 最重要的特性之一。它确保了 Shadow DOM 内部的样式不会泄漏到外部，也不会受到外部样式的影响。

我们可以用一个表格来总结一下 Shadow DOM 的样式隔离规则：

规则	说明	示例
Shadow DOM 内部的 CSS 样式	只作用于 Shadow DOM 内部的元素。	`<style>:host { color: red; }</style>` // 只会影响 Shadow DOM 内部的元素
Shadow DOM 外部的 CSS 样式	默认情况下，不会影响 Shadow DOM 内部的元素。	`<style>p { color: blue; }</style>` // 不会影响 Shadow DOM 内部的元素
CSS 继承	某些 CSS 属性（如 `color`, `font`, `text-align` 等）会从 Shadow Host 继承到 Shadow DOM 内部的元素。	如果 Shadow Host 的 `color` 设置为 `green`，则 Shadow DOM 内部的文本元素也会继承这个颜色。
`:host` 选择器	用于选择 Shadow Host 元素本身。	`:host { display: block; border: 1px solid black; }` // 会给 Shadow Host 元素添加边框
`:host-context()` 选择器	用于根据 Shadow Host 元素的祖先元素来应用样式。	`:host-context(.theme-dark) { color: white; }` // 如果 Shadow Host 的祖先元素具有 `theme-dark` 类，则 Shadow Host 内部的文本颜色会变为白色
CSS Variables (自定义属性)	可以通过 CSS Variables 在 Shadow DOM 内外共享样式。	`:root { --main-color: purple; }` // 在根元素定义 CSS Variable，然后在 Shadow DOM 内部使用 `color: var(--main-color);`
`::slotted()` 选择器	用于选择 Shadow DOM 内部的 slot 元素的内容。	`::slotted(p) { font-style: italic; }` // 会将 slot 元素中的元素的样式设置为斜体

举个栗子 🌰：

假设我们创建了一个名为 <my-button> 的 Web Component：

<my-button>
  Click me!
</my-button>

然后在 Web Component 的 JavaScript 代码中，我们创建 Shadow DOM 并添加一些样式：

class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    const button = document.createElement('button');
    button.textContent = this.textContent; // 获取组件的内容

    const style = document.createElement('style');
    style.textContent = `
      button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
      }
      button:hover {
        background-color: #3e8e41;
      }
    `;

    shadow.appendChild(style);
    shadow.appendChild(button);
  }
}

customElements.define('my-button', MyButton);

在这个例子中，<my-button> 组件内部的按钮样式（绿色背景、白色文字等）只会在 Shadow DOM 内部生效，不会影响到页面上其他的按钮。即使页面上已经有全局的按钮样式，也不会覆盖 Shadow DOM 内部的样式。

三、通信：打破次元壁，让 Shadow DOM 也能“说话” 🗣️

虽然 Shadow DOM 实现了样式隔离，但它并不是一个完全封闭的黑盒子。我们需要一些方法，让 Shadow DOM 内部的组件能够与外部世界进行通信。

以下是一些常用的通信方式：

Properties（属性）：

通过 Properties，我们可以将数据从外部传递到 Shadow DOM 内部。在 Web Component 的 JavaScript 代码中，我们可以定义 observedAttributes 数组，并在 attributeChangedCallback 方法中监听属性的变化。

例如：

class MyComponent extends HTMLElement {
  static get observedAttributes() {
    return ['message'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<p>Message: ${this.message}</p>`;
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'message') {
      this.shadowRoot.innerHTML = `<p>Message: ${newValue}</p>`;
    }
  }

  get message() {
    return this.getAttribute('message') || '';
  }

  set message(value) {
    this.setAttribute('message', value);
  }
}

customElements.define('my-component', MyComponent);

然后，在 HTML 中，我们可以这样使用：

<my-component message="Hello, world!"></my-component>

当 message 属性发生变化时，attributeChangedCallback 方法会被调用，从而更新 Shadow DOM 内部的内容。

Events（事件）：

通过 Events，我们可以将 Shadow DOM 内部的事件传递到外部。在 Web Component 的 JavaScript 代码中，我们可以使用 dispatchEvent 方法来触发自定义事件。

例如：

class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });

    const button = document.createElement('button');
    button.textContent = 'Click me!';
    button.addEventListener('click', () => {
      const event = new CustomEvent('my-button-click', {
        bubbles: true, // 允许事件冒泡
        composed: true, // 允许事件穿透 Shadow DOM
        detail: {
          message: 'Button clicked!',
        },
      });
      this.dispatchEvent(event);
    });

    shadow.appendChild(button);
  }
}

customElements.define('my-button', MyButton);

然后，在 HTML 中，我们可以这样监听事件：

<my-button id="myButton"></my-button>
<script>
  document.getElementById('myButton').addEventListener('my-button-click', (event) => {
    console.log(event.detail.message); // 输出 "Button clicked!"
  });
</script>

在这个例子中，当 Shadow DOM 内部的按钮被点击时，会触发一个名为 my-button-click 的自定义事件。通过设置 bubbles: true 和 composed: true，我们可以让事件冒泡到 Shadow DOM 外部，并被外部的事件监听器捕获。

Methods（方法）：

通过 Methods，我们可以直接调用 Shadow DOM 内部的方法。在 Web Component 的 JavaScript 代码中，我们可以将方法暴露给外部。

例如：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `<p>Message: Hello!</p>`;
  }

  // 定义一个公共方法
  sayHello() {
    alert('Hello from inside the Shadow DOM!');
  }
}

customElements.define('my-component', MyComponent);

然后，在 HTML 中，我们可以这样调用方法：

<my-component id="myComponent"></my-component>
<script>
  document.getElementById('myComponent').sayHello(); // 调用 Shadow DOM 内部的 sayHello 方法
</script>

在这个例子中，我们可以通过 document.getElementById('myComponent').sayHello() 来直接调用 Shadow DOM 内部的 sayHello 方法。

Slots（插槽）：

Slots 是一种更灵活的通信方式，它允许我们将外部的内容插入到 Shadow DOM 内部的指定位置。在 Web Component 的 JavaScript 代码中，我们可以使用 <slot> 元素来定义插槽。

例如：

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          padding: 10px;
          margin: 10px;
        }
      </style>
      <div class="card">
        <slot name="title">Default Title</slot>
        <slot>Default Content</slot>
      </div>
    `;
  }
}

customElements.define('my-card', MyCard);

然后，在 HTML 中，我们可以这样使用：

<my-card>
  <h2 slot="title">Card Title</h2>
  <p>This is the card content.</p>
</my-card>

在这个例子中，<h2 slot="title">Card Title</h2> 会被插入到名为 title 的插槽中，而 <p>This is the card content.</p> 会被插入到默认插槽中。如果没有提供内容，则会显示插槽的默认内容。

四、Shadow DOM 的模式：Open vs. Closed 🔒

在创建 Shadow DOM 时，我们需要指定一个模式：open 或 closed。

open 模式： 允许外部 JavaScript 通过 shadowRoot 属性访问 Shadow DOM 内部的结构。
closed 模式： 禁止外部 JavaScript 访问 Shadow DOM 内部的结构。

// Open 模式
const shadowOpen = this.attachShadow({ mode: 'open' });
console.log(this.shadowRoot); // 可以访问 Shadow DOM

// Closed 模式
const shadowClosed = this.attachShadow({ mode: 'closed' });
console.log(this.shadowRoot); // null

选择哪种模式取决于你的需求。如果你的组件需要与外部进行更灵活的交互，可以使用 open 模式。如果你的组件需要更强的封装性，可以使用 closed 模式。

五、总结：Shadow DOM，Web Components 的灵魂伴侣 💖

Shadow DOM 是 Web Components 中不可或缺的一部分。它提供了强大的样式隔离和行为封装机制，让你的 Web Components 可以像独立的个体一样存在，互不干扰。

通过 Properties、Events、Methods 和 Slots 等通信方式，我们可以打破 Shadow DOM 的次元壁，让它与外部世界进行灵活的交互。

掌握了 Shadow DOM，你就掌握了 Web Components 的灵魂！以后再也不用担心样式冲突和脚本冲突了，可以放心地构建可重用、可维护的前端组件了！

希望今天的分享对大家有所帮助。如果大家还有什么问题，欢迎在评论区留言，我会尽力解答。谢谢大家！🙏

最后的彩蛋 🎁：

记住，写代码就像谈恋爱，要保持热情，要多沟通，要懂得包容，最重要的是，要永远保持学习的心！祝大家 Bug 越来越少，头发越来越多！咱们下期再见！👋

发表回复 取消回复

发表回复取消回复