试图从外部样式 Shadow DOM

Question

试图从外部样式 Shadow DOM

5

我试图在影子DOM中样式化文本，但没有成功。唯一的问题是，我希望从影子DOM外部进行操作。另一个重要的问题是，影子DOM样式应该仅适用于“bar”元素内部的影子DOM。以下是我的测试代码：

<!doctype html>

<html>
  <head>
    <style>
      :host(bar) span:first-child {
        text-transform: uppercase;
        color: green;
      }
    </style>
  </head>

  <body>
    <bar></bar>

    <script>
      var bar = document.querySelector('bar');
      var root = bar.createShadowRoot();
      root.innerHTML = '<span>bar</span><span>foo</span>';
    </script>
  </body>
</html>

而且还有一个额外的问题，

的确切含义是什么？

:host(bar:host) { ... }

做什么？

- Jeanluca Scaljeri

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Entoarox · Accepted Answer

阴影DOM规范目前仍在开发中，其大部分功能在不断地从一刻到另一刻进行根本性变化。

要从外部为阴影DOM元素设置样式，这取决于您的浏览器是否依赖于（过时的）伪元素公开或新的CSS阴影DOM选择器^^（猫）和^（帽子）。如果浏览器支持新语法，则可以使用帽子（^）选择器简单地输入元素的阴影DOM，或者如果您希望跨越所有阴影边界，则可以使用猫（^^）选择器来实现。

如果浏览器尚未支持它，则需要将要样式化的元素作为其父元素的伪元素公开，通过向其添加伪属性<shadow-element peusdo="myname" />，然后在您的CSS中引用该伪元素shadow-host::myname。

至于您的“奖励”问题，您正在引用阴影主机元素，但仅当阴影主机是<bar>元素时，如果省略第二个:host，则您正在引用一个阴影主机，该主机是<bar>元素或具有其祖先。

请注意，由于API正在不断开发，上述信息在一个月左右之后可能不再可靠。