Shadow DOM 301

高级概念和 DOM API

Eric Bidelman

警告 ：本文介绍的是旧版 Shadow DOM (v0)。如果您对使用 Shadow DOM 感兴趣，请参阅我们的新文章“Shadow DOM v1: self-contained web components”。其中涵盖了 Chrome 53、Safari 10 和 Firefox 63 中随附的新版 Shadow DOM v1 规范中的所有内容。

本文介绍了 Shadow DOM 的更多精彩功能！它基于 Shadow DOM 101 和 Shadow DOM 201 中讨论的概念。

注意 ：在 Chrome 中，在 about:flags 中开启“启用实验性网络平台功能”，即可对本文中介绍的所有内容进行实验。

使用多个影子根

主持派对时，如果每个人都挤到一个房间，派对上会变得很闷。 您希望将一群人分配到多个房间。托管 Shadow DOM 的元素也可以执行此操作，也就是说，它们可以一次托管多个影子根。

我们来看看如果尝试将多个影子根附加到一个主机，会发生什么情况：

<div id="example1">Light DOM</div>
<script>
  var container = document.querySelector('#example1');
  var root1 = container.createShadowRoot();
  var root2 = container.createShadowRoot();
  root1.innerHTML = '<div>Root 1 FTW</div>';
  root2.innerHTML = '<div>Root 2 FTW</div>';
</script>

注意 ：在开发者工具中，开启“Show Shadow DOM”以便能够检查 ShadowRoots。

尽管事实上我们已经附加了影子树，但渲染结果是“Root 2 FTW”。这是因为添加到宿主的最后一个影子树胜出。就渲染而言，它是一个 LIFO 堆栈。检查开发者工具可验证此行为。

注意 ：阴影树会按照添加顺序进行堆叠，从最新的阴影树开始。最后添加的就是要呈现的那一个。

注意 ：最近添加的树称为“较新树”。以前的树称为“旧树”。在本例中，root2 是较年轻的树，root1 是较旧的树。

那么，如果只有最后一个阴影被邀请到渲染方，使用多个阴影有什么用处呢？请输入阴影插入点。

阴影插入点

“阴影插入点”(<shadow>) 与普通插入点 (<content>) 类似，因为它们都是占位符。不过，它们不是托管方“内容”的占位符，而是其他“影子树”的托管方。 它就是 Shadow DOM Inception！

可以想象，随着您越深入地钻，情况就会变得更加复杂。因此，该规范非常清楚当多个 <shadow> 元素同时存在时会发生什么情况：

注意 ：如果影子树中存在多个 <shadow> 插入点，则仅识别第一个插入点。其余部分会被忽略。

回顾一下我们的原始示例，第一个阴影 root1 已从邀请列表中删除。添加 <shadow> 插入点后，它会恢复：

<div id="example2">Light DOM</div>
<script>
var container = document.querySelector('#example2');
var root1 = container.createShadowRoot();
var root2 = container.createShadowRoot();
root1.innerHTML = '<div>Root 1 FTW</div><content></content>';
**root2.innerHTML = '<div>Root 2 FTW</div><shadow></shadow>';**
</script>

关于此示例，有几个值得注意的地方：

1. “Root 2 FTW”仍会显示在“Root 1 FTW”上方。这是因为我们放置了 <shadow> 插入点的位置。若要反转，请移动插入点：root2.innerHTML = '<shadow></shadow><div>Root 2 FTW</div>';。
2. 请注意，root1 中现在有一个 <content> 插入点。这会使得文本节点“Light DOM”一起进行渲染。

<shadow> 呈现了什么？

有时，了解在 <shadow> 中渲染的较旧影子树会很有帮助。您可以通过 .olderShadowRoot 获取对该树的引用：

**root2.olderShadowRoot** === root1 //true

获取主机的影子根目录

如果某个元素托管了 Shadow DOM，您可以使用 .shadowRoot 访问其最新的影子根：

var root = host.createShadowRoot();
console.log(host.shadowRoot === root); // true
console.log(document.body.shadowRoot); // null

如果您担心有人穿过您的阴影，请将 .shadowRoot 重新定义为 null：

Object.defineProperty(host, 'shadowRoot', {
  get: function() { return null; },
  set: function(value) { }
});

虽然有点像技巧，但确实有效。最后，请务必注意，Shadow DOM 并不设计为安全功能虽然非常棒。请勿依赖它来实现完全的内容隔离。

在 JS 中构建 Shadow DOM

如果您更喜欢在 JS 中构建 DOM，HTMLContentElement 和 HTMLShadowElement 提供了相关的接口。

<div id="example3">
  <span>Light DOM</span>
</div>
<script>
var container = document.querySelector('#example3');
var root1 = container.createShadowRoot();
var root2 = container.createShadowRoot();

var div = document.createElement('div');
div.textContent = 'Root 1 FTW';
root1.appendChild(div);

 // HTMLContentElement
var content = document.createElement('content');
content.select = 'span'; // selects any spans the host node contains
root1.appendChild(content);

var div = document.createElement('div');
div.textContent = 'Root 2 FTW';
root2.appendChild(div);

// HTMLShadowElement
var shadow = document.createElement('shadow');
root2.appendChild(shadow);
</script>

此示例与上一部分中的示例几乎完全相同。唯一的区别是，现在我使用 select 拉取新添加的 <span>。

使用插入点

从宿主元素中选择并“分布”到影子树中的节点称为...鼓点...分布式节点！当插入点引入它们时，它们可以跨越阴影边界。

从概念上来讲，插入点的一个奇怪之处在于插入点实际上并没有移动 DOM。主机的节点保持不变。插入点只是将节点从主机重新投影到影子树中。它用于呈现/渲染“将这些节点移到此处”“在此地点渲染这些节点。”

注意 ：您无法将 DOM 遍历到 <content>。

例如：

<div><h2>Light DOM</h2></div>
<script>
var root = document.querySelector('div').createShadowRoot();
root.innerHTML = '<content select="h2"></content>';

var h2 = document.querySelector('h2');
console.log(root.querySelector('content[select="h2"] h2')); // null;
console.log(root.querySelector('content').contains(h2)); // false
</script>

就是这样！h2 不是 shadow DOM 的子级。这就引出了另一个趣闻：

注意 ：插入点功能极其强大。您可以将其视为为 Shadow DOM 创建“声明性 API”的一种方式。主元素可以包含世界上的所有标记，但除非我将它邀请到带有插入点的 Shadow DOM 中，它毫无意义。

Element.getDistributedNodes()

我们无法遍历 <content>，但可以使用 .getDistributedNodes() API 在插入点查询分布式节点：

<div id="example4">
  <h2>Eric</h2>
  <h2>Bidelman</h2>
  <div>Digital Jedi</div>
  <h4>footer text</h4>
</div>

<template id="sdom">
  <header>
    <content select="h2"></content>
  </header>
  <section>
    <content select="div"></content>
  </section>
  <footer>
    <content select="h4:first-of-type"></content>
  </footer>
</template>

<script>
var container = document.querySelector('#example4');

var root = container.createShadowRoot();

var t = document.querySelector('#sdom');
var clone = document.importNode(t.content, true);
root.appendChild(clone);

var html = [];
[].forEach.call(root.querySelectorAll('content'), function(el) {
  html.push(el.outerHTML + ': ');
  var nodes = el.getDistributedNodes();
  [].forEach.call(nodes, function(node) {
    html.push(node.outerHTML);
  });
  html.push('\n');
});
</script>

Element.getDestinationInsertionPoints()

与 .getDistributedNodes() 类似，您可以通过调用节点的 .getDestinationInsertionPoints() 来检查节点分布到哪些插入点：

<div id="host">
  <h2>Light DOM
</div>

<script>
  var container = document.querySelector('div');

  var root1 = container.createShadowRoot();
  var root2 = container.createShadowRoot();
  root1.innerHTML = '<content select="h2"></content>';
  root2.innerHTML = '<shadow></shadow>';

  var h2 = document.querySelector('#host h2');
  var insertionPoints = h2.getDestinationInsertionPoints();
  [].forEach.call(insertionPoints, function(contentEl) {
    console.log(contentEl);
  });
</script>

工具：Shadow DOM Visualizer

理解 Shadow DOM 这种黑魔法并非易事。我记得我第一次把头戴在脑袋里。

为了帮助直观了解 Shadow DOM 渲染的工作原理，我使用 d3.js 构建了一个工具。左侧的两个标记框都是可修改的。您可以随意粘贴自己的标记并试试看，了解其工作原理，以及插入点会将主机节点调配到影子树中。

启动 Shadow DOM Visualizer

试试看，然后告诉我你的想法！

事件模型

有些事件会跨越影子边界，有些则不会。在事件跨越边界的情况下，系统会调整事件目标，以维持影子根上边界提供的封装。也就是说，事件经过重访定位，看似来自宿主元素，而不是 Shadow DOM 的内部元素。

注意 ：访问 event.path 可查看调整后的事件路径。

Play 操作 1

• 这题很有趣。您应该会看到从宿主元素 (<div data-host>) 到蓝色节点的 mouseout。尽管它是分布式节点，但仍在主机中，而不是 ShadowDOM。再次向下拖动至黄色会导致蓝色节点上出现 mouseout。

Play 动作 2

• 有一个 mouseout 显示在主机上（在末尾）。通常，您会看到所有黄色块都会触发 mouseout 事件。不过，在这种情况下，这些元素是 Shadow DOM 内部的元素，且事件不会通过其上边界气泡。

Play 动作 3

• 请注意，当您点击输入时，focusin 不会出现在输入上，而是显示在主机节点本身上。它被重新定位了！

始终停止的活动

以下事件绝不会跨过影子边界：

• abort
• error
• 选择
• 更改
• 负荷
• 重置
• resize
• scroll
• 选择开始

总结

我希望您会认同 Shadow DOM 非常强大。有史以来第一次，我们进行了适当的封装，而无需考虑 <iframe> 或其他旧技术的额外负担。

Shadow DOM 无疑是一个复杂的巨兽，但它却值得在 Web 平台中引入。 花点时间研究。学习。踊跃提问。

如需了解更多信息，请参阅 Dominic 的简介文章 Shadow DOM 101 和我的 Shadow DOM 201：CSS 和样式设置一文。