阴影 DOM 201

CSS 和样式

本文将详细介绍您可以使用 Shadow DOM 实现的更多令人惊叹的功能。 本课程以 Shadow DOM 101 中介绍的概念为基础。如果您需要了解相关信息，请参阅这篇文章。

简介

毫无疑问，未设置样式的标记没有任何吸引力。幸运的是，Web 组件背后的优秀团队预见了这一点，并为我们提供了帮助。CSS 范围模块定义了许多用于设置影子树中的内容样式的选项。

样式封装

Shadow DOM 的一项核心功能是阴影边界。它具有许多不错的属性，但最好的一个是它免费提供样式封装。换种说法：

<div><h3>Light DOM</h3></div>
<script>
var root = document.querySelector('div').createShadowRoot();
root.innerHTML = `
  <style>
    h3 {
      color: red;
    }
  </style>
  <h3>Shadow DOM</h3>
`;
</script>

关于此演示，有两个有趣的观察结果：

  • 此页面上还有其他 h3，但只有 ShadowRoot 中的 h3 与 h3 选择器匹配，因此采用了红色样式。同样，默认情况下使用作用域样式。
  • 本页面上针对 h3 定义的其他样式规则不会渗透到我的内容中。 这是因为选择器不会跨越阴影边界。

故事的寓意是什么？我们有来自外部世界的样式封装。感谢 Shadow DOM！

设置宿主元素的样式

借助 :host，您可以选择托管影子树的元素并为其设置样式：

<button class="red">My Button</button>
<script>
var button = document.querySelector('button');
var root = button.createShadowRoot();
root.innerHTML = `
  <style>
    :host {
      text-transform: uppercase;
    }
  </style>
  <content></content>
`;
</script>

一个问题是，父页面中的规则比在元素中定义的 :host 规则具有更高的特异性，但比在主元素上定义的 style 属性低。这可让用户从外部替换您的样式。:host 也仅在 ShadowRoot 上下文中起作用，因此无法在 Shadow DOM 之外使用。

如果主元素与 <selector> 匹配，则 :host(<selector>) 的函数形式允许您定位主元素。

示例：仅当元素本身具有类 .different（例如 <x-foo class="different"></x-foo>）时才匹配：

:host(.different) {
    ...
}

响应用户状态

:host 的一个常见用例是，在创建自定义元素并希望响应不同的用户状态（:hover、:focus、:active 等）时。

<style>
  :host {
    opacity: 0.4;
    transition: opacity 420ms ease-in-out;
  }
  :host(:hover) {
    opacity: 1;
  }
  :host(:active) {
    position: relative;
    top: 3px;
    left: 3px;
  }
</style>

为元素设置主题

如果 :host-context(<selector>) 伪类或其任意父级与 <selector> 匹配，则该伪类与宿主元素匹配。

:host-context() 的一个常见用途是根据元素的周围环境为其设置主题。例如，很多人都通过将类应用到 <html> 或 <body> 进行主题化：

<body class="different">
  <x-foo></x-foo>
</body>

如果 <x-foo> 是类为 .different 的元素的子元素，您可以使用 :host-context(.different) 为其设置样式：

:host-context(.different) {
  color: red;
}

这样，您就可以在元素的 Shadow DOM 中封装样式规则，以便根据元素的上下文为其设置独特的样式。

支持在一个阴影根目录中使用多种主机类型

:host 的另一种用途是，如果您要创建主题库，并且希望支持在同一 Shadow DOM 中设置多种类型的主机元素的样式。

:host(x-foo) {
    /* Applies if the host is a <x-foo> element.*/
}

:host(x-foo:host) {
    /* Same as above. Applies if the host is a <x-foo> element. */
}

:host(div) {
    /* Applies if the host element is a <div>. */
}

从外部设置 Shadow DOM 内部的样式

::shadow 伪元素和 /deep/ 组合器就像一把 CSS 权威的 Vorpal 宝剑。它们允许穿透 Shadow DOM 的边界，以便为阴影树中的元素设置样式。

::shadow 伪元素

如果元素至少有一个阴影树，则 ::shadow 伪元素会与阴影根本身匹配。借助它，您可以编写用于为元素阴影 DOM 中的内部节点设置样式的选择器。

例如，如果某个元素托管了阴影根，您可以编写 #host::shadow span {} 来设置其阴影树中的所有 span 的样式。

<style>
  #host::shadow span {
    color: red;
  }
</style>

<div id="host">
  <span>Light DOM</span>
</div>

<script>
  var host = document.querySelector('div');
  var root = host.createShadowRoot();
  root.innerHTML = `
    <span>Shadow DOM</span>
    <content></content>
  `;
</script>

示例（自定义元素）- <x-tabs> 的 Shadow DOM 中包含 <x-panel> 个子元素。每个面板都有自己的阴影树，其中包含 h2 标题。如需为主页中的这些标题设置样式，可以编写以下代码：

x-tabs::shadow x-panel::shadow h2 {
    ...
}

/deep/ 组合器

/deep/ 组合器与 ::shadow 类似，但功能更强大。它完全忽略所有阴影边界，并跨越到任意数量的阴影树。简而言之，/deep/ 可让您深入挖掘元素的内部结构并定位到任何节点。

/deep/ 组合器在具有多层 Shadow DOM 的自定义元素中特别有用。典型示例包括嵌套一组自定义元素（每个元素都托管自己的阴影树）或使用 <shadow> 创建从其他元素继承的元素。

示例（自定义元素）- 选择树中任意位置且是 <x-tabs> 的后代（子元素）的所有 <x-panel> 元素：

x-tabs /deep/ x-panel {
    ...
}

示例：为阴影树中的任意位置具有类 .library-theme 的所有元素设置样式：

body /deep/ .library-theme {
    ...
}

使用 querySelector()

就像 .shadowRoot 会打开阴影树以进行 DOM 遍历一样，组合符也会打开阴影树以进行选择器遍历。您可以编写单个语句，而不是编写嵌套的复杂链条：

// No fun.
document.querySelector('x-tabs').shadowRoot
        .querySelector('x-panel').shadowRoot
        .querySelector('#foo');

// Fun.
document.querySelector('x-tabs::shadow x-panel::shadow #foo');

设置原生元素的样式

原生 HTML 控件在样式方面是一项挑战。许多人会直接放弃，自行构建。不过，借助 ::shadow 和 /deep/，网络平台中使用 Shadow DOM 的任何元素都可以设置样式。<input> 类型和 <video> 就是很好的示例：

video /deep/ input[type="range"] {
  background: hotpink;
}

创建样式钩子

自定义功能很不错。在某些情况下，您可能需要在 Shadow 的样式屏蔽中打孔，并创建钩子以供其他人设置样式。

使用 ::shadow 和 /deep/

/deep/ 背后有强大的功能。它为组件作者提供了一种方式，可以将各个元素指定为可设置样式，或将大量元素指定为可设置主题。

示例 - 为具有 .library-theme 类的所有元素设置样式，忽略所有阴影树：

body /deep/ .library-theme {
    ...
}

使用自定义伪元素

WebKit 和 Firefox 都定义了伪元素，用于设置原生浏览器元素的内部部分的样式。input[type=range] 就是一个很好的示例。您可以通过定位 ::-webkit-slider-thumb 来设置滑块滑块 <span style="color:blue">blue</span> 的样式：

input[type=range].custom::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: blue;
  width: 10px;
  height: 40px;
}

与浏览器向某些内部元素提供样式钩子的方式类似，Shadow DOM 内容的作者可以将某些元素指定为可由外部元素设置样式。这通过自定义伪元素来实现。

您可以使用 pseudo 属性将元素指定为自定义伪元素。其值或名称需要带有“x-”前缀。这样做会在阴影树中创建与该元素的关联，并为外部人员提供指定的车道来跨越阴影边界。

以下示例展示了如何创建自定义滑块微件，并允许用户为其滑块滑块设置蓝色样式：

<style>
  #host::x-slider-thumb {
    background-color: blue;
  }
</style>
<div id="host"></div>
<script>
  var root = document.querySelector('#host').createShadowRoot();
  root.innerHTML = `
    <div>
      <div pseudo="x-slider-thumb"></div>' +
    </div>
  `;
</script>

使用 CSS 变量

通过 CSS 变量创建主题钩子是一种非常有效的方式。实质上，就是创建“样式占位符”供其他用户填写。

假设一位自定义元素作者在其 Shadow DOM 中标注了变量占位符。一个用于设置内部按钮的字体，另一个用于设置内部按钮的颜色：

button {
  color: var(--button-text-color, pink); /* default color will be pink */
  font-family: var(--button-font);
}

然后，该元素的嵌入者可以根据自己的喜好定义这些值。或许是为了与自己网页上的超酷 Comic Sans 主题相匹配：

#host {
  --button-text-color: green;
  --button-font: "Comic Sans MS", "Comic Sans", cursive;
}

由于 CSS 变量的继承方式，一切都很顺利，并且效果非常棒！整个画面如下所示：

<style>
  #host {
    --button-text-color: green;
    --button-font: "Comic Sans MS", "Comic Sans", cursive;
  }
</style>
<div id="host">Host node</div>
<script>
  var root = document.querySelector('#host').createShadowRoot();
  root.innerHTML = `
    <style>
      button {
        color: var(--button-text-color, pink);
        font-family: var(--button-font);
      }
    </style>
    <content></content>
  `;
</script>

重置样式

可继承样式（例如字体、颜色和行高）会继续影响 Shadow DOM 中的元素。不过，为了尽可能提高灵活性，Shadow DOM 提供了 resetStyleInheritance 属性来控制阴影边界处发生的情况。不妨将其视为在创建新组件时从零开始的方法。

resetStyleInheritance

  • false - 默认值。可继承的 CSS 属性会继续继承。
  • true - 将边界处的可继承属性重置为 initial。

以下演示展示了更改 resetStyleInheritance 对阴影树有何影响：

<div>
  <h3>Light DOM</h3>
</div>

<script>
  var root = document.querySelector('div').createShadowRoot();
  root.resetStyleInheritance = <span id="code-resetStyleInheritance">false</span>;
  root.innerHTML = `
    <style>
      h3 {
        color: red;
      }
    </style>
    <h3>Shadow DOM</h3>
    <content select="h3"></content>
  `;
</script>

<div class="demoarea" style="width:225px;">
  <div id="style-ex-inheritance"><h3 class="border">Light DOM</div>
</div>
<div id="inherit-buttons">
  <button id="demo-resetStyleInheritance">resetStyleInheritance=false</button>
</div>

<script>
  var container = document.querySelector('#style-ex-inheritance');
  var root = container.createShadowRoot();
  //root.resetStyleInheritance = false;
  root.innerHTML = '<style>h3{ color: red; }</style><h3>Shadow DOM<content select="h3"></content>';

  document.querySelector('#demo-resetStyleInheritance').addEventListener('click', function(e) {
    root.resetStyleInheritance = !root.resetStyleInheritance;
    e.target.textContent = 'resetStyleInheritance=' + root.resetStyleInheritance;
    document.querySelector('#code-resetStyleInheritance').textContent = root.resetStyleInheritance;
  });
</script>
开发者工具继承的属性

了解 .resetStyleInheritance 有点棘手，主要是因为它只会影响可继承的 CSS 属性。其中指出：在寻找要继承的属性时，请勿在网页和 ShadowRoot 之间的边界处从主机继承值，而应改用 initial 值（根据 CSS 规范）。

如果您不确定 CSS 中哪些属性会继承，请查看此实用列表，或在“元素”面板中切换“显示继承的属性”复选框。

为分布式节点设置样式

分布式节点是在插入点呈现的元素（<content> 元素）。<content> 元素可让您从 Light DOM 中选择节点，并在 Shadow DOM 中的预定义位置渲染这些节点。它们在逻辑上并不存在于 Shadow DOM 中；它们仍然是宿主元素的子项。插入点只是呈现方面的问题。

分布式节点会保留主文档中的样式。也就是说，即使这些元素在插入点呈现，主页面的样式规则仍会继续应用于这些元素。同样，分布式节点在逻辑上仍位于轻量 DOM 中，并且不会移动。而只是在其他位置呈现不过，当节点分布到 Shadow DOM 后，它们可以采用影子树中定义的其他样式。

::content 伪元素

分布式节点是托管元素的子元素，那么我们如何从 Shadow DOM 内定位到它们？答案是 CSS ::content 伪元素。 它是一种定位通过插入点的 Light DOM 节点的方法。例如：

::content > h3 会为通过插入点的所有 h3 标记设置样式。

我们来看一个示例：

<div>
  <h3>Light DOM</h3>
  <section>
    <div>I'm not underlined</div>
    <p>I'm underlined in Shadow DOM!</p>
  </section>
</div>

<script>
var div = document.querySelector('div');
var root = div.createShadowRoot();
root.innerHTML = `
  <style>
    h3 { color: red; }
      content[select="h3"]::content > h3 {
      color: green;
    }
    ::content section p {
      text-decoration: underline;
    }
  </style>
  <h3>Shadow DOM</h3>
  <content select="h3"></content>
  <content select="section"></content>
`;
</script>

在插入点重置样式

创建 ShadowRoot 时，您可以选择重置继承的样式。<content> 和 <shadow> 插入点也具有此选项。使用这些元素时，请在 JS 中设置 .resetStyleInheritance，或在元素本身上使用布尔值 reset-style-inheritance 属性。

  • 对于 ShadowRoot 或 <shadow> 插入点：reset-style-inheritance 表示在可继承的 CSS 属性命中阴影内容之前，它们会在主机上设为 initial。此位置称为上限。

  • 对于 <content> 插入点：reset-style-inheritance 表示在将宿主子项分布到插入点之前，可继承的 CSS 属性会设置为 initial。此位置称为下限。

总结

作为自定义元素的作者，我们可以通过多种方式控制内容的外观和风格。Shadow DOM 是这个全新世界的基石。

Shadow DOM 为我们提供了作用域样式封装，并提供了一种方法，可让我们根据需要选择允许外界提供多少（或尽可能少）的资源。通过定义自定义伪元素或添加 CSS 变量占位符，作者可以为第三方提供方便的样式钩子，以进一步自定义其内容。总而言之，网站作者可以完全控制其内容的呈现方式。