Fe-interview: [html] 第27天 说说你对影子(Shadow)DOM的了解

[haizhilin2013]

第27天 说说你对影子(Shadow)DOM的了解

[hbl045]

shadow Dom是html给出的一个用来封装的虚拟DOM与普通的DOM不相同，他更像伪类元素，去修饰DOM，或者说，他是一个DOM的HTML组件，常见标签为video等媒体标签（这些已经封装好的标签，有对应样式）。详情可以看这个网站 https://www.jianshu.com/p/e47b103f3b60

[tzjoke]

web component的API，用来给组件创建子DOM树，就像楼上说的，不受外部style影响，外部通过选择器查询也不会查到里面来。它有两种模式 open和closed，open模式可以获取shadow root，可以做一些类似DOM操作，所以对shadow root查询就可以查到里面的元素了，然后做一些操作。用cloesd的目的就是隐藏实现，但其实只是表面功夫，实际上你还是可以通过一些手段来访问到~

[Vi-jay]

眉头一皱

[haizhilin2013]

@Vi-jay ？咋了？

[Vi-jay]

@Vi-jay ？咋了？

不会这题。。。 没想到大佬还看回复

[haizhilin2013]

@Vi-jay 不会没关系，正好查漏补缺！看的，你们的回答我都会看的！因为题目是我发的，所以你们的回答我这边都有邮件通知，随时关注！

[hc951221]

我想到了box-shadow,很显然我想错了，越看越懵逼

[haizhilin2013]

@hc951221 补充下这块的知识吧

[jiamianmao]

之前看小程序原理的时候看过这块。
Shadow Dom 是 Web Component 的一种实现，另外 Custom Element 和 Template 亦是如此。
常见的Video Radio 都是对 Shadow dom 的实践，也就是对一段功能的封装，形成模块化。

[Konata9]

Shadow DOM 可以想象成我们在 Vue 或者 React 中使用的一个个组件，是一种将 HTML 结构、Style 封装起来的结构。我们熟悉的 <video> 标签，其实就是 Shadow DOM 的封装。

借用 MDN 上的图，可以看到 Shadow DOM 允许我们在 DOM 文档中插入一个 DOM 的子树。Shadow Tree 会挂在 Shadow host 对应的 DOM 上。之后，Shadow DOM 与外层 DOM 不会相互影响，因此可以放心用来做组件。

具体的例子可以参考 MDN 给出的案例<popup-info-box>

这个例子告诉我们可以利用 Shadow DOM 封装自己的 tag 标签，并且可以在网页中使用。

参考文章：
使用 shadow DOM
神奇的 Shadow DOM

[yyz841875845]

第一次听说。mark一下，长姿势了

[larry0442]

mark 看到了一点印象没有，应该是没有看过-_-

[blueRoach]

shadow DOM就是由html、css和js封装的‘’组件“，它不会受到外部样式的影响。如vedio

[MrZ2019]

shadow DOM就是由html、css和js封装的‘’组件“，它不会受到外部样式的影响。如video