shadow dom

2019-07-05 22:57:26

旨在构建基于组件的应用,可针对性提供如下解决方案:

  • 隔离DOM:组件的 DOM 是独立的(例如,document.querySelector() 不会返回组件 shadow DOM 中的节点)
  • 作用域CSS:shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏,页面样式也不会渗入
  • 组合:为组件设计一个声明性、基于标记的 API
  • 简化CSS:作用域 DOM 意味着您可以使用简单的 CSS 选择器,更通用的 id/类名称,而无需担心命名冲突

    shadow DOM 实现CSS样式作用域的方式
    创建影子树(作用域DOM树),附加至该元素上,但与其自身真正的子项分离开来。被附着的元素称为影子宿主。在影子中添加的任何项均将成为宿主元素的本地项,包括样式。
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
微信扫码关注
领取学习礼包
加入百人技术交流群
探讨前端、小程序开发及逆向、微信开发...
一起学习,共同成长
微信情报 更多 >
    每天进步一点点~