文档章节

Shadow DOM系列6-综述

一配
 一配
发布于 2015/08/11 17:39
字数 1114
阅读 126
收藏 5

Web Components 系列主要由自定义元素(Custom Elements)HTML 引入(HTML Imports)影子 DOM(shadow DOM) 组成,而 Shadow DOM 无疑是当中的重中之重。本文对下面翻译的几篇文章进行综述,总结了 Shadow DOM 术语梳理和结构关系。

术语标注


  • 影子 DOM(shadow DOM):是一种依附于文档原有节点的子 DOM,具有封装性

  • 光明 DOM(light DOM):就是原生的 DOM,为了与影子 DOM 区别采用的名词

  • 影子树(shadow trees):特指存在于 shadow DOM 中的节点结构

  • 影子宿主(shadow host):特指 shadow DOM 所依附的影子宿主,是存在于原生 DOM 中的节点

  • 影子根(shadow root):指 shadow DOM 的根节点

  • 插入点(insertion point):指 shadow DOM 中的 <content> 标签

  • 贪心插入点(greedy insertion point):指使用通配符选择器进行匹配的插入点

  • 影子边界(shadow boundary):指对影子 DOM 与光明 DOM 进行的样式隔离,两者中的样式不会相互影响。

  • 分布节点(distributed nodes):指原本存在于光明 DOM 结构中,被 <content> 标签添加到影子 DOM 中的节点。

结构关系

影子 DOM 必须依附于一个文档中的原有 DOM 节点,也就是影子宿主,而影子 DOM 中的节点也可以成为另一个影子树的宿主。在 Web Components 的实际使用场景中,宿主一般是自定义元素,而在影子 DOM 中封装了其实现细节。

影子 DOM 树被影子边界所包裹,边界给其带来了封装性,这一封装性包括:

  1. DOM 的封装性:在不同的 DOM 树中无法选择另外 DOM 中的元素,只有获取对应的 DOM 树才能对其中的元素进行操作;

  2. 样式的封装性:在不同的 DOM 树中样式无法相互影响,只有通过一系列手段突破边界才能对对方的样式进行操作。其中通过影子 DOM 来对宿主 DOM 进行操作的方式多种多样:

    需要注意的是,单独使用 ::content 选择器没有意义,这表示对插入点进行的样式修饰,而插入点是不展现的;所以该选择器的出现必然跟随者子选择器,以便对分布节点进行样式影响。

    而光明 DOM 对于影子 DOM 的影响却要弱很多,且原则上来讲,影子 DOM 存在的意义就是为了对子 DOM 进行封装,而实现自定义元素对外部隐藏细节的效果。如果用户要求进行影响的话,这里也存在两个大杀器:一层穿透 ::shadow 伪类选择器与多重穿透 /deep/ 组合符。

    • 对宿主本身进行样式影响:通过 :host 选择器

    • 对宿主的祖先节点进行样式影响:通过 :host-context 选择器

    • 对分布节点进行影响:通过 ::content 选择器

  3. JS 的重定向与阻塞:影子边界对于 JS 的阻塞是最弱的,它仅仅阻塞了一部分事件, 同时将影子 DOM 中的事件重定向到宿主上。关于事件重定向,Eric Bidelman 的 Shadow DOM 301 讲的更为细致一点,事实上重定向仅仅是表示影子 DOM 中的事件冒泡无法通过影子边界,而在边界内部的事件监听还是有效果的。我们也可以通过 event.path 来查看调整后的事件路径,并找到事件在影子 DOM 中的真正源头。

光明 DOM 与影子 DOM 的结构关系如下图所示:

结构关系图

图中蓝线表示样式影响方式,红线表示 DOM 影响方式,黄线表示 JS 影响方式。

一些注意的内容

  1. 在影子 DOM 中,<link> 标签时被忽略的,因此不能用外链的方式引入 CSS 文件。在 Polymer 中我们可以这样做,是因为 Polymer 将 <link> 节点转化为了 <style> 节点所致。在原生的实现上要注意这一点。

译文集合

  1. Shadow DOM系列1-简介

  2. Shadow DOM系列2-基础

  3. Shadow DOM系列3-样式

  4. Shadow DOM系列4-样式(续)

  5. Shadow DOM系列5-JavaScript

本文转载自:http://www.ituring.com.cn/article/179915

一配
粉丝 35
博文 146
码字总数 117133
作品 0
西城
私信 提问
Shadow DOM系列1-简介

英文链接:Shadow DOM: Introduction, 26 AUGUST 2013 on Web Components, Shadow DOM 我们今天要讨论一个有时候十分令人费解的大话题:Shadow DOM。这个话题可能是至少在过去的 5-10 年内前...

一配
2015/08/11
1K
0
Shadow DOM系列3-样式

原文链接:Shadow DOM: Styles, 28 AUGUST 2013 on Web Components, Shadow DOM 昨天的博文的内容全是关于你的第一个 Shadow DOM 元素的组织和编码。但我知道一大批围观群众都会问:我们咋加...

一配
2015/08/11
586
0
Shadow DOM系列5-JavaScript

英文链接:Shadow DOM: JavaScript, 02 SEPTEMBER 2013 on Web Components, Shadow DOM 我们目前已经对模板、HTML引入和 Shadow DOM(简介、基础、样式、样式续) 有了一定了解。所有这些技...

一配
2015/08/11
563
0
Shadow DOM系列2-基础

英文链接:Shadow DOM: The Basics, 27 AUGUST 2013 on Web Components, Shadow DOM 在我的上一篇博文里,我介绍了 Shadow DOM 并举例说明为啥它这么重要。今天,我们要干点苦力活——“码”...

一配
2015/08/11
297
0
Shadow DOM系列4-样式(续)

英文链接:Shadow DOM: Styles (cont.), 29 AUGUST 2013 on Web Components, Shadow DOM 在昨天的博文里我们整体讨论了设置 Shadow DOM 样式的一些基本事项,但我们仅仅触及了一些皮毛。今天...

一配
2015/08/11
359
0

没有更多内容

加载失败,请刷新页面

加载更多

CQRS与AXON

CQRS 看了蛮多文章,只会CRUD,却不懂CQRS,CQRS是遵循DDD思想而产生的一种模式,Command and Query Responsibility Segregation 命令与查询隔离。查询就直接通过正常的模式service调dao层。...

无极之岚
14分钟前
2
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
29分钟前
32
2
500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
8
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部