# 翻译：Shadow DOM隔离释义

xi4oh4o 发布于2019-08-23 13:53 / 709人阅读

摘要：使用的一个主要好处是样式隔离。假设我们仍然使用来挂接这个，如下所示请注意，元素位于模板元素内部，并与一起克隆到内。这允许在阴影根中定义的样式规则作用域。封闭模式的设计目标是禁止对来自外部世界的中的节点进行任何访问。

使用shadow DOM的一个主要好处是样式隔离。要了解这意味着什么，让我们来假设我们要创建自定义进度条组件。我们可以使用两个嵌套的DIV来显示条形，使用另一个DIV来显示文本以显示百分比，如下所示：

请注意模板元素的使用:

它允许作者包含HTML片段，以后可以通过克隆内容来实例化

模板元素可以出现在文档中的任何位置（例如，在表格和tr元素之间）

模板元素中的内容是惰性的，不运行脚本或加载图像和其他类型的子资源。

这个进度条实现的问题是它的两个内部div可以被用户自由访问，它的样式规则也不局限于进度条。例如，为进度条定义的样式规则将应用于进度条外部的内容，其类名为progress：


    Pending an approval

同样的，为其他元素定义的样式规则可以覆盖进度条中的规则：

虽然我们可以通过使用自定义元素名称（如custom-progressbar）来规范规则，然后通过以下方式初始化所有其他属性来解决这些问题

all: initial

但Shadow DOM提供了更优雅的解决方案，外部div处引入封装层，以便进度条组件的用户看不到其内部实现（例如为标签和条创建的div）。还有为进度条定义的CSS样式不会干扰页面的其余部分，反之亦然。为此，我们首先通过调用在进度条上创建一个ShadowRoot：

attachShadow({mode: "closed"})

然后在其下附加其实现所需的各种DOM实现。假设我们仍然使用div来挂接这个Shadow Root，如下所示：

请注意，style元素位于模板元素内部，并与div一起克隆到Shadow Root内。这允许在阴影根中定义的样式规则作用域。在阴影根之外定义的样式规则就无法适用于Shadow Root内的元素。

使用打开模式，您可以通过HTML元素的shadowRoot属性访问Shadow DOM。关闭模式你不能。 shadowRoot将返回null。封闭模式的设计目标是禁止对来自外部世界的Shadow Root中的节点进行任何访问。

翻译来自：

Introducing Slot-Based Shadow DOM API | WebKit

GPU云服务器云服务器释义 Shadow 阿里云shadow box-shadow

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99718.html

Web Components 是个什么样的东西

摘要：生命周期和回调在这个的基础上，标准提供了一系列控制自定义元素的方法。生命周期和自定义元素标签的保持一致。否则，这个属性会返回一个表示引入的文件的文档对象，类似于。相关的东西不多，而且它现在已经是纳入生效的标准文档中了。前端组件化这个主题相关的内容已经火了很久很久，angular 刚出来时的 Directive 到 angular2 的 components，还有 React 的 co...

XUI 2019-08-29 11:13 评论0 收藏0
Web Components 是个什么样的东西

摘要：生命周期和回调在这个的基础上，标准提供了一系列控制自定义元素的方法。生命周期和自定义元素标签的保持一致。否则，这个属性会返回一个表示引入的文件的文档对象，类似于。相关的东西不多，而且它现在已经是纳入生效的标准文档中了。前端组件化这个主题相关的内容已经火了很久很久，angular 刚出来时的 Directive 到 angular2 的 components，还有 React 的 co...

wizChen 2019-08-01 15:39 评论0 收藏0
Web Components 是个什么样的东西

摘要：生命周期和回调在这个的基础上，标准提供了一系列控制自定义元素的方法。生命周期和自定义元素标签的保持一致。否则，这个属性会返回一个表示引入的文件的文档对象，类似于。相关的东西不多，而且它现在已经是纳入生效的标准文档中了。前端组件化这个主题相关的内容已经火了很久很久，angular 刚出来时的 Directive 到 angular2 的 components，还有 React 的 co...

ranwu 2019-08-20 10:35 评论0 收藏0
# Web Components 全揽

摘要：定制元素可以在原生元素外创建定制元素。此定制元素内部有一个加号按钮，一个减号按钮，一个显示当前值。此主题会在下一部分内介绍。定制元素的属性元素的属性被称为，对象内的属性被称为。做响应的同步处理。 Web Components 全揽 Web Components技术可以把一组相关的HTML、JS代码和CSS风格打包成为一个自包含的组件，只要使用大家熟悉的标签即可引入此组件。Web Com...

legendmohe 2019-08-23 13:50 评论0 收藏0
可能是你见过最完善的微前端解决方案

摘要：而从技术实现角度，微前端架构解决方案大概分为两类场景单实例即同一时刻，只有一个子应用被展示，子应用具备一个完整的应用生命周期。为了解决产品研发之间各种耦合的问题，大部分企业也都会有自己的解决方案。原文链接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...

Kahn 2019-08-26 14:04 评论0 收藏0