[html] 第27天 说说你对影子(Shadow)DOM的了解
haizhilin2013 opened this issue · 17 comments
第27天 说说你对影子(Shadow)DOM的了解
shadow Dom是html给出的一个用来封装的虚拟DOM与普通的DOM不相同，他更像伪类元素，去修饰DOM，或者说，他是一个DOM的HTML组件，常见标签为video等媒体标签（这些已经封装好的标签，有对应样式）。详情可以看这个网站 https://www.jianshu.com/p/e47b103f3b60
web component的API，用来给组件创建子DOM树，就像楼上说的，不受外部style影响，外部通过选择器查询也不会查到里面来。它有两种模式 open和closed，open模式可以获取shadow root，可以做一些类似DOM操作，所以对shadow root查询就可以查到里面的元素了，然后做一些操作。用cloesd的目的就是隐藏实现，但其实只是表面功夫，实际上你还是可以通过一些手段来访问到~
眉头一皱
@Vi-jay ？咋了？
@Vi-jay 不会没关系，正好查漏补缺！看的，你们的回答我都会看的！因为题目是我发的，所以你们的回答我这边都有邮件通知，随时关注！
我想到了box-shadow,很显然我想错了，越看越懵逼
@hc951221 补充下这块的知识吧
之前看小程序原理的时候看过这块。
Shadow Dom 是 Web Component 的一种实现，另外 Custom Element 和 Template 亦是如此。
常见的Video Radio 都是对 Shadow dom 的实践，也就是对一段功能的封装，形成模块化。
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
第一次听说。mark一下，长姿势了
mark 看到了一点印象没有，应该是没有看过-_-
shadow DOM就是由html、css和js封装的‘’组件“，它不会受到外部样式的影响。如vedio
shadow DOM就是由html、css和js封装的‘’组件“，它不会受到外部样式的影响。如video
shadow DOM 就是又html, css和js封装的"组件", 它不会受外部样式的影响,如video
web component的API，用来给组件创建子DOM树，不受外部style影响，外部通过选择器查询也不会查到里面来
影子DOM（Shadow DOM）是一种Web标准技术，用于将组件的样式和结构封装在一个独立的DOM子树中。它允许开发者创建具有隔离作用域的组件，以防止组件的样式和结构受到外部样式的污染。
在HTML中，我们可以使用 <template> 元素来定义Shadow DOM的内容。通过使用 <template> 元素，我们可以将DOM结构和样式封装在一个Shadow DOM树中，然后将其插入到主DOM树中的特定位置。
Shadow DOM具有以下特点：
-
封装性：Shadow DOM允许我们将组件的样式和结构封装在独立的DOM树中，与主DOM树隔离开来。这样可以防止样式冲突和意外修改。
-
作用域隔离：Shadow DOM中定义的样式只作用于Shadow DOM内部，不会影响主DOM树中的其他元素。这样可以确保组件的样式不会被外部样式影响，也不会影响其他组件。
-
继承性：Shadow DOM可以继承主DOM树的样式，使得组件在外部样式的基础上进行样式定制。
-
封装性：Shadow DOM中定义的事件处理程序和属性不会泄露到外部环境，确保组件的行为和状态的私有性。
Shadow DOM在构建Web组件和自定义元素时非常有用。它提供了一种更好的封装性和隔离性，使得组件可以独立开发和维护。