# 翻译：Shadow DOM隔离释义

栏目: Html · 发布时间: 7年前

内容简介：使用shadow DOM的一个主要好处是样式隔离。要了解这意味着什么，让我们来假设我们要创建自定义进度条组件。我们可以使用两个嵌套的DIV来显示条形，使用另一个DIV来显示文本以显示百分比，如下所示：请注意模板元素的使用:这个进度条实现的问题是它的两个内部div可以被用户自由访问，它的样式规则也不局限于进度条。例如，为进度条定义的样式规则将应用于进度条外部的内容，其类名为progress：

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

<style>
.progress { position: relative; border: solid 1px;width: 100px; height: 1rem; }
.progress > .bar { background: red; height: 100%; }
.progress > .label {
  position: absolute; top: 0;
  width: 100%;
    text-align: center; font-size: 0.8rem;}
</style>
<template id="progress-bar-template">
    <div class="progress">
        <div class="bar"></div>
        <div class="label">0%</div>
    </div>
</template>
<script>
function createProgressBar() {
    var fragment = document.getElementById('progress-bar-template').content.cloneNode(true);
    var progressBar = fragment.querySelector('div');
    progressBar.updateProgress = function (newPercentage) {
      var ps =  newPercentage + '%'
      this.querySelector('.label').textContent = ps 
        this.querySelector('.bar').style.width = ps
    }
    return progressBar;
}
var p =  createProgressBar()
document.body.appendChild(p)
p.updateProgress(22)
</script>
复制代码

请注意模板元素的使用:

它允许作者包含HTML片段，以后可以通过克隆内容来实例化
模板元素可以出现在文档中的任何位置（例如，在表格和tr元素之间）
模板元素中的内容是惰性的，不运行脚本或加载图像和其他类型的子资源。

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

<section class="project">
    <p class="progress">Pending an approval</p>
</section>
复制代码

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

<style>
.label { font-weight: bold; }
</style>
复制代码

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

all: initial
复制代码

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

attachShadow({mode: 'closed'})
复制代码

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

<body>
<template id="progress-bar-template">
    <div class="progress">
        <div class="bar"></div>
        <div class="label">0%</div>
    </div>
<style>
.progress { position: relative; border: solid 1px;width: 100px; height: 1rem; }
.progress > .bar { background: red; height: 100%; }
.progress > .label {
  position: absolute; top: 0;
  width: 100%;
    text-align: center; font-size: 0.8rem;}
</style>
</template>
<script>
function createProgressBar() {
    var progressBar = document.createElement('div');
    var shadowRoot = progressBar.attachShadow({mode: 'closed'});
    shadowRoot.appendChild(document.getElementById('progress-bar-template').content.cloneNode(true));
    progressBar.updateProgress = function (newPercentage) {
        shadowRoot.querySelector('.label').textContent = newPercentage + '%';
        shadowRoot.querySelector('.bar').style.width = newPercentage + '%';
    }
    return progressBar;
}
var p =  createProgressBar()
document.body.appendChild(p)
p.updateProgress(22)
</script></body>
复制代码

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

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

以上所述就是小编给大家介绍的《# 翻译：Shadow DOM隔离释义》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

在线

王坚 / 中信出版集团 / 2018-5-21 / 59.00元

50多万年前的关键词是光明与黑暗， 50多年前的关键词是数字和模拟，而今天的关键词是在线与离线。移动互联网是比传统互联网在线程度更深的互联网。对于真正成熟的互联网来说，手机只是诸多的在线设备之一，慢慢地，每一个设备都会变成互联网的终端。真正的竞争力，是把所有人都可能拥有的东西变成财富，让沙子变成硅。大家都把大数据当作金矿，想要掘金。但在王坚看来，大数据的厉害之处是把沙......一起来看看《在线》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器

各进制数互转换器