shadow dom

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

• 隔离DOM:组件的 DOM 是独立的（例如，document.querySelector() 不会返回组件 shadow DOM 中的节点）
• 作用域CSS:shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏，页面样式也不会渗入
• 组合:为组件设计一个声明性、基于标记的 API
• 简化CSS:作用域 DOM 意味着您可以使用简单的 CSS 选择器，更通用的 id/类名称，而无需担心命名冲突 shadow DOM 实现CSS样式作用域的方式 创建影子树(作用域DOM树)，附加至该元素上，但与其自身真正的子项分离开来。被附着的元素称为影子宿主。在影子中添加的任何项均将成为宿主元素的本地项，包括样式。