摘要

  • W3C 在 2012 年的首份公开草案提出 DOM 子树之间的功能边界，2014 年草案进一步讨论多棵树的组合；2018 年说明书记录了相关内容并入 DOM、HTML、CSS Scoping 和 UI Events 等规范的过程。
  • 现行 DOM 规范让网页提供的普通子节点被分配到组件内部的插槽，节点在底层 DOM 树中的父子关系不因此改变。CSS 的 :host、::slotted、::part 则提供有边界的样式接触面。

想象一个新闻卡片组件。组件作者精心做好按钮、边框和排版；网页编辑带来照片和标题。若两边共用一间没有门的屋子，整站样式表可能挥着油漆桶进来，把卡片的按钮刷成另一副模样。若组件把门焊死，网页也塞不进新闻。问题从来不是“要不要隔离”四个字，而是谁能在哪个位置动手。

W3C 2012 年 5 月 22 日的首份公开工作草案描述同一文档内 DOM 子树之间的功能边界。它希望组件有自己的内部结构，同时仍是网页的一部分。2014 年 6 月 17 日的工作草案把多棵树如何组合成一个整体摆到了台前。早期文本记录的是当时的设计方案；它们让人看清设计者究竟在解决什么冲突。

这套机制后来没有继续待在一份独立文档里。W3C 2018 年 3 月 1 日的工作组说明指出，相关内容正进入 DOM、HTML、CSS Scoping 和 UI Events 规范。房子的结构、装修和访客行为，各归不同的施工图。文档位置变了，浏览器里的树边界和组合规则仍是核心。

现行的 WHATWG DOM Living Standard把角色说得更清楚：一个元素可以成为宿主，挂上一棵以 shadow root 为根的内部树。网页放在宿主下面的普通子节点属于 light tree。内部树里可以留出 slot，把这些外部节点分配进来，在最终呈现中为它们安排位置。照片看起来嵌在卡片上方，底层节点却仍是网页交给宿主的孩子；插槽改的是组合方式，不是偷偷给照片换户口。

这也是调试时容易撞上的墙。屏幕上挨在一起的两个元素，DOM 归属可能分处两边。没有外部节点可放的插槽还能显示组件预备的后备内容。看布局要看组合后的树；看节点的父子关系要回到原来的树。把两张图纸叠成一张，常常就会误判选择器为什么没有命中。

样式的门由 CSSWG 的 CSS Shadow Module Level 1 编辑草案解释。网页上的普通选择器不会像穿过普通后代关系那样一路钻进 shadow tree；这减少了无心的样式碰撞。组件作者也能明确开口：:host 处理宿主，::slotted 在规定范围内触及分配来的内容，::part 则给愿意暴露的内部部件起名，供外面的网页定制。给客人一只门把手，和把整串钥匙交出去，是两种生意。

CSS 文本是编辑草案，适合说明机制的设计边界；W3C 的三份历史文件负责时间线。几份原始资料共同勾勒出一份作者之间的协议：网页提供内容，组件决定内部摆放和可触及的表面，浏览器负责把它们合成读者看到的卡片。