简单理解slot算法和shadow DOM

栏目: 编程工具 · 发布时间: 5年前

内容简介:TheInputWhen each node is assigned to a slot, this slot is also added to the node's

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算法和shadow DOM

渲染结果与slot算法十分契合,但是较为奇怪的是,vue的slot机制,不会生成像w3c web component 的shadow DOM。

web component shadow DOM是下面这样:

简单理解slot算法和shadow DOM

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

R数据科学

R数据科学

[新西兰] 哈德利 • 威克姆、[美] 加勒特 • 格罗勒芒德 / 陈光欣 / 人民邮电出版社 / 2018-7 / 139.00元

本书的目标是教会读者使用最重要的数据科学工具,从而为实施数据科学奠定坚实的基础。读完本书后,你将掌握R语言的精华,并能够熟练使用多种工具来解决各种数据科学难题。每一章都按照这样的顺序组织内容:先给出一些引人入胜的示例,以便你可以整体了解这一章的内容,然后再深入细节。本书的每一节都配有习题,以帮助你实践所学到的知识。一起来看看 《R数据科学》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试