简单理解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

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

查看所有标签

猜你喜欢:

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

摩尔神话

摩尔神话

阿诺德•萨克雷、戴维•布洛克、雷切尔•琼斯 / 黄亚昌 / 中国人民大学出版社 / 2017-9 / 105元

戈登·摩尔领导“八叛逆”创建了仙童半导体公司,为硅谷人士的冒险和创新确立了蓝图。他对技术进行创新,并使“变节资本”成为关键动力,使硅谷成为如今的模样;作为仙童半导体的研发总监,以及在芯片制造中扮演着关键角色,他的观点让创业之火熊熊燃烧;在英特尔初创期,开辟了第二条战线,即用微处理器来实现数字逻辑;他为全球半导体产业以及电子革命确立了核心动力,促进了技术普及,加速了社会变革;在对晶体管技术坚定不移的......一起来看看 《摩尔神话》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具