专业术语

- DOM : 我们通过有线(或者无线网络:|)得到一个文本字符串。为了在屏幕上渲染一些东西来，浏览器就要去解析这个文本字符串，并且浏览器为了能有更好的理解我们的文档，他会把解析后的结果转换到数据模型中。与此同时，浏览器还通过在树结构中创建这些解析后的对象来保留原始字符串的层次结构。

我们需要做的是让机器更容易地读懂我们的文档。这个我们文档的数据模型树被称为: 文档对象模型(DOM)

- Component Author : 指的是那些创建了组件并且定义了组件应该如何运行的编者们。一般来说是写了很多 shadow DOM 代码的编写者。比如 - 创造了 input 元素的浏览器供应商

- Component User : 指的是使用那些组件的开发者们。他们可以使用 Light DOM 并且在组件上进行定义一些属性，他们甚至可以根据自己的需求来扩展组件的内部结构。比如 - 使用 input 元素的我们。

- Shadow Root: 他通过自己的shadow DOM和一个元素建立联系。从技术上来说，它是一种非元素节点，是一种特殊的 文档碎片

  1. <custom-picture>
  2.     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ISOLATION
  3.     #shadow-root
  4.         ...
  5.     ____________________________________________ DOCUMENT FRAGMENT
  7.     <!--LIGHT DOM-->
  8. </custom-picture>

在上面的代码中，我在奇怪的 ASCII 里面添加了一个 shadow root。这样有助于我们思考Shadow Root 在文档里的表现形式，他们是在“围墙”里的文档碎片。

- Shadow Host: 这是shadow root 附加的宿主元素。这个宿主可以和他的shadow root通过自身的属性 .shadowRoot 进行关联。

- Shadow Tree : 包含Shadow Root里面所有的元素，形成了自己的作用域，被称为(影子树)Shadow Tree。

The elements in a shadow tree are not descendants of the shadow host in general (including for the purposes of Selectors like the descendant combinator) - Spec

- Light DOM: - 我们可以在开始标记和结束标记之间来放置一组DOM元素。DOM是在shadow DOM之外的元素，是用户写入的元素，是实际元素的子节点。

  1. <custom-picture>
  2.     ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3.     #shadow-root
  4.     ___________________________
  6.     <!--Light DOM-->
  7.     <img src="https://path.to/a-kitten.png">
  8.     <cite>A Nice Kitten!</cite>
  9.     <!--Light DOM ends-->
  10. </custom-picture>

- 文档碎片:

接口表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为DocumentFragment不是真实DOM树的一部分，它的变化不会引起DOM树的重新渲染的操作(reflow) ，且不会导致性能等问题。 - MDN