Open FrankKai opened 5 years ago
阅读完这篇博客你会有以下收获:
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
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这两个概念,关于它们的规范,在这里:http://w3c.github.io/webcomponents/spec/shadow/#conformance
mdn上关于shadow DOM的一篇特别好的文章:https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Shadow DOM : attach a hidden separated DOM to an element.
几个shadow DOM的专业术语:
Shadow DOM知识点:
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是下面这样:
阅读完这篇博客你会有以下收获:
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
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这两个概念,关于它们的规范,在这里:http://w3c.github.io/webcomponents/spec/shadow/#conformance
mdn上关于shadow DOM的一篇特别好的文章:https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Shadow DOM : attach a hidden separated DOM to an element.
几个shadow DOM的专业术语:
Shadow DOM知识点:
shadow DOM的作用是什么:增强组件内聚性。
vue demo: component.vue -> shadow host
page.vue -> shadow Tree
渲染结果:![image](https://user-images.githubusercontent.com/19262750/48935228-e9d89c80-ef41-11e8-8ce2-8a252854ecf0.png)
渲染结果与slot算法十分契合,但是较为奇怪的是,vue的slot机制,不会生成像w3c web component 的shadow DOM。
web component shadow DOM是下面这样:![image](https://user-images.githubusercontent.com/19262750/48935508-e691e080-ef42-11e8-9df2-1567021c5bdc.png)