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

---

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

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

---

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

---

一、自定义元素（Custom Elements）

场景：想定义一个，自带特效。
步骤：

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中使用
 

---

二、Shadow DOM（影子DOM）

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

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

class MyComponent extends HTMLElement {
  constructor() {
    super();
    // 创建Shadow DOM（mode:open表示可外部访问）
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      
      
我是被包裹的内容！
    `;
  }
}
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["
红色文字
"]
    end

    subgraph 主文档
        A
        B
    end

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

---

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

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

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

        默认标题
        默认内容
      
    `;
  }
}
customElements.define('my-card', MyCard);

使用示例：

  
自定义标题
  
这是卡片的内容...

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

---

关键点总结

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

---

目录：总目录

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

脚注

---

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