Web Components：深入解析 Shadow DOM

Web Components 不仅仅是自定义元素。Shadow DOM、HTML 模板和自定义元素各自扮演着重要角色。本文将重点探讨 Shadow DOM 在整个技术体系中的定位，解释其重要性、适用场景以及高效应用方法。

Web Components 技术全景

常见误区是将 Web Components 直接与框架组件进行比较。但大多数示例实际上仅针对自定义元素（Custom Elements），这只是 Web Components 技术栈的一部分。Web Components 实际上是一组可独立使用的 Web 平台 API：

• 自定义元素（Custom Elements）
• HTML 模板（HTML Templates）
• Shadow DOM

换句话说，开发者可以创建不使用 Shadow DOM 或 HTML 模板的自定义元素，但结合这些特性将带来更好的稳定性、可重用性、可维护性和安全性。

Shadow DOM 的核心价值

现代 Web 应用通常由来自不同供应商的库和组件组合而成。在传统（“light”）DOM 中，样式和脚本很容易相互渗透或冲突。Shadow DOM 通过将相关 HTML 和 CSS 封装在 DocumentFragment 中来隔离组件，防止冲突并保持关注点分离。

1
2
3
4

<!-- 传统DOM的"div汤"问题 -->
<div id="my-custom-app-framework-landingpage-header" class="my-custom-app-framework-foo">
  <div><div><div><div><div><div>etc...</div></div></div></div></div></div>
</div>

支持 Shadow Root 的元素

虽然 Shadow Root 通常与自定义元素关联，但它也可以用于任何 HTMLUnknownElement，并且许多标准元素也支持，包括：

• <div>, <span>, <p>
• 所有标题元素 <h1> 到 <h6>
• 区块元素 <section>, <article>, <aside>, <header>, <footer>, <nav>, <main>

创建 Shadow Root 的两种方式

命令式创建

使用 JavaScript 的 attachShadow({ mode }) 方法：

1
2
3
4

const host = document.createElement('div');
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = '<p>Hello from the Shadow DOM!</p>';
document.body.appendChild(host);

mode 参数可以是：

• open：允许通过 element.shadowRoot 访问
• closed：对外部脚本隐藏 Shadow Root

声明式创建

使用 <template> 标签的 shadowrootmode 属性：

1
2
3
4
5

<my-widget>
  <template shadowrootmode="closed">
    <p> Declarative Shadow DOM content </p>
  </template>
</my-widget>

Shadow DOM 高级配置

1. clonable:true

允许通过 cloneNode(true) 完整克隆 Shadow DOM 内容：

1
2
3
4
5

<div id="original">
  <template shadowrootmode="closed" shadowrootclonable>
    <p> This is a test </p>
  </template>
</div>

2. serializable:true

支持将 Shadow DOM 内容序列化为字符串：

1

const snapshot = element.getHTML({ serializableShadowRoots: true });

3. delegatesFocus:true

使宿主元素成为其内部内容的 <label>：

1
2
3
4
5

<custom-input>
  <template shadowrootmode="closed" shadowrootdelegatesfocus>
    <input type="text">
  </template>
</custom-input>

插槽(Slot)机制

Shadow DOM 使用 <slot> 元素实现内容分发：

1
2
3
4
5
6
7
8

<my-widget>
  <template shadowrootmode="closed">
    <h2><slot name="title">默认标题</slot></h2>
    <slot>默认内容</slot>
  </template>
  <span slot="title">自定义标题</span>
  <p>自定义内容</p>
</my-widget>

插槽元素会触发 slotchange 事件：

1
2
3

slot.addEventListener('slotchange', () => {
  console.log(slot.assignedNodes());
});

安全最佳实践

建议采用 “closed-first” 原则：

1. 默认使用 closed 模式
2. 仅在调试或确实必要时使用 open 模式
3. 特别注意表单和敏感数据的处理

通过深入理解 Shadow DOM 的这些特性和机制，开发者可以构建出更健壮、更安全的 Web Components。