红宝书第五十一讲：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);

效果图：

---

三、插槽（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）详解：小白的守护者
下篇文章：红宝书第五十一讲：Web Components：创造你自己的HTML标签

脚注

---

1. 《JavaScript高级程序设计（第5版）》演示了自定义元素的基本定义与模板结合 ↩︎

2. 《JavaScript高级程序设计（第5版）》通过样式隔离例子说明Shadow DOM的独立性 ↩︎

3. 《JavaScript高级程序设计（第5版）》详细说明了attachShadow方法及mode选项 ↩︎

4. 《JavaScript高级程序设计（第5版）》解释了插槽在Shadow DOM中的应用场景 ↩︎