阴影 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 之外使用。

如果 :host(<selector>) 的函数形式与 <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 伪元素

如果元素至少有一个阴影树，则 ::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/ combinator

/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 中时，它们可以采用 shadow 树中定义的其他样式。

::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 变量占位符，作者可以为第三方提供方便的样式钩子，以进一步自定义其内容。总而言之，网站作者可以完全控制其内容的呈现方式。