New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[html] 第27天 说说你对影子(Shadow)DOM的了解 #94
Comments
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 补充下这块的知识吧 |
之前看小程序原理的时候看过这块。 |
借用 MDN 上的图,可以看到 具体的例子可以参考 MDN 给出的案例 这个例子告诉我们可以利用 参考文章: |
第一次听说。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中,我们可以使用 Shadow DOM具有以下特点:
Shadow DOM在构建Web组件和自定义元素时非常有用。它提供了一种更好的封装性和隔离性,使得组件可以独立开发和维护。 |
第27天 说说你对影子(Shadow)DOM的了解
The text was updated successfully, but these errors were encountered: