红宝书第五十一讲：Web Components：创造你自己的HTML标签

---

红宝书第五十一讲：Web Components：创造你自己的HTML标签

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

---

Web Components = 自定义元素 + Shadow DOM
就像搭积木一样，你可以创造可复用、独立功能的组件，自带样式与逻辑，不受外部干扰。

---

一、自定义元素（Custom Elements）

场景：想定义一个<my-button>，自带特效。
步骤：

1. 继承HTMLElement类：定义元素行为
2. 注册元素：告诉浏览器新标签的规则

代码示例（结合资料3和资料4）¹：

// 1. 定义元素类
class MyButton extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = '点击我！';  // 默认内容
    this.addEventListener('click', () => {
      alert('按钮生效！');
    });
  }
}

// 2. 注册元素（名字必须带短横线）
customElements.define('my-button', MyButton);

// 3. 在HTML中使用
<my-button></my-button> <!-- 渲染出自定义按钮 -->

---

二、Shadow DOM（影子DOM）

作用：将组件的内部结构隐藏起来，样式不泄露到外部，反之亦然²

如何创建（资料5中的attachShadow方法）³：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    // 创建Shadow DOM（mode:open表示可外部访问）
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <style>
        /* 这里的样式只作用于Shadow DOM内部 */
        p { color: red; }
      </style>
      <p>我是被包裹的内容！</p>
    `;
  }
}
customElements.define('my-component', MyComponent);

效果图：

flowchart LR
    A[网页主DOM树] --> B[自定义元素组件]
    B --> C["#shadow-root (open)"]

    subgraph ShadowDOM[Shadow DOM 内部]
        C --> D[style标签]
        D -->|作用域样式| E["p { color: red }"]
        C --> F[内容插槽]
        F --> G["<p>红色文字</p>"]
    end

    subgraph 主文档
        A
        B
    end

    C -.->|封装隔离| H[主文档样式]

---

三、插槽（Slots）：灵活内容插入

问题：如何在Shadow DOM中插入外部内容？
答案：使用<slot>标签占位（资料6的插槽机制）⁴：

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <div class="card">
        <slot name="title">默认标题</slot>
        <slot name="content">默认内容</slot>
      </div>
    `;
  }
}
customElements.define('my-card', MyCard);

使用示例：

<my-card>
  <h2 slot="title">自定义标题</h2>
  <p slot="content">这是卡片的内容...</p>
</my-card>

• slot="title"的内容会替换Shadow DOM中的<slot name="title">。

---

关键点总结

技术	作用	代码片段参考
自定义元素	创建全新HTML标签	资料3中的class FooElement
Shadow DOM	隔离组件样式与结构	资料5中的attachShadow
插槽（Slots）	允许外部内容嵌入组件内部	资料6中的<slot>机制

---

目录：总目录

上篇文章：红宝书第五十讲：内容安全策略（CSP）详解：小白的守护者

脚注

---

1. 《JavaScript高级程序设计（第5版）》演示了自定义元素的基本定义与模板结合 ↩
2. 《JavaScript高级程序设计（第5版）》通过样式隔离例子说明Shadow DOM的独立性 ↩
3. 《JavaScript高级程序设计（第5版）》详细说明了attachShadow方法及mode选项 ↩
4. 《JavaScript高级程序设计（第5版）》解释了插槽在Shadow DOM中的应用场景 ↩