5

我正在尝试在 shadow dom 中设置文本样式但没有成功。唯一的事情是我想从影子 DOM 之外进行。另一件重要的事情是，Shadow dom 样式应该只适用于“bar”元素内的 shadow 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) { ... }

做 ？

4

1 回答 1

7

shadow DOM 规范目前仍在开发中，它的大部分功能从一个时刻到下一个时刻都在发生根本性的变化。

要从外部设置阴影 DOM 元素的样式，取决于您的浏览器是否依赖（过时的）peusdo 元素暴露或新的 css 阴影 dom 选择器^^（cat）和^（hat）如果浏览器支持新语法，您可以简单地使用 hat ( ) 选择器输入一个元素 shadow dom ^，或者如果您希望跨越所有阴影边界，您可以使用 cat ( ^^) 选择器来执行此操作。

如果浏览器还不支持它，您需要通过向其添加伪属性来公开您希望设置样式的元素作为其父元素的<shadow-element peusdo="myname" />伪元素，然后在您的 css 中引用该伪元素shadow-host::myname

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

请注意，由于 API 正在不断开发中，因此上述信息可能在超过一个月左右的时间后仍不可靠。

于 2013-12-20T22:08:25.150 回答