簡單理解slot算法和shadow DOM

閱讀完這篇博客你會有如下收穫：

• slot算法是什麼？
• shadow DOM是什麼？
• vue slot機制與w3c web component 規範的 shadow DOM渲染結果有何異同？

slot算法

The slotting algorithm assigns nodes of a shadow tree host into slots of that tree.

Input HOST -- a shadow tree host Output All child nodes of HOST are slotted

1. Let TREE be HOST's shadow tree
2. Let DEFAULT be an empty list of nodes
3. For each child node NODE of HOST, in tree order:
4. Let NAME be NODE's slot name
5. If NAME is missing, add NODE to DEFAULT
6. Let SLOT be the slot with slot name NAME for TREE
7. If SLOT does not exist, discard node
8. Otherwise, assign NODE to SLOT
9. Let DEFAULT-SLOT be the the default slot for TREE
10. If DEFAULT-SLOT does not exist, stop
11. Otherwise, assign all nodes in DEFAULT to DEFAULT-SLOT.

When each node is assigned to a slot, this slot is also added to the node's destination insertion points list.

這是w3c web components規範的一個提案，地址位於https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md

在這個提案中，咱們發現shadow DOM和shadow Tree這兩個概念，關於它們的規範，在這裏：w3c.github.io/webcomponen…

mdn上關於shadow DOM的一篇特別好的文章：developer.mozilla.org/en-US/docs/…

Shadow DOM ： attach a hidden separated DOM to an element.

幾個shadow DOM的專業術語：

• Shadow host: shadow DOM要鏈接的普通DOM節點。
• Shadow tree: shadow DOM裏的DOM樹。
• Shadow boundary: Shadow DOM結束的地方，也是普通DOM開始的地方。
• Shadow root：shadow tree的根節點。

Shadow DOM知識點：

• shadow DOM和普通DOM同樣能夠添加子節點設置屬性，可是shadow DOM內部的代碼不能影響到外部的任何東西。
• shadow DOM其實一直都在用，例如
• 兩種模式mode：open，closed。

shadow DOM的做用是什麼：加強組件內聚性。

An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean.

vue demo: component.vue -> shadow host

<slot></slot>
<slot name="foo"></slot>
<slot name="bar"></slot>
複製代碼

page.vue -> shadow Tree

<span>+</span>
<span slot="foo">-</span>
<span slot="bar">2</span>
<span slot="bar">3</span>
複製代碼

渲染結果：

渲染結果與slot算法十分契合，可是較爲奇怪的是，vue的slot機制，不會生成像w3c web component 的shadow DOM。

web component shadow DOM是下面這樣：