Question

我正试图在阴影dom中设置文本样式而没有成功。唯一的问题是我想从影子DOM之外做这件事。另一个重要的事情，Shadow 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) { ... }

做什么？

Answer 1

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

要从外部设置阴影DOM元素的样式，取决于您的浏览器是依赖于（过时的）peusdo元素曝光还是新的css阴影dom选择器^^（cat）和^（帽子）如果浏览器支持新语法，您只需使用hat（^）选择器输入元素shadow dom，或者如果您希望跨越所有阴影边界，则可以使用cat（^^）选择器这样做。

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

中

关于你的'奖励'问题，你引用了影子主机元素，但是只有当影子主机是<bar>元素时，如果省略第二个:host，你引用影子主机这是一个<bar>元素，或者有一个作为其祖先。

请注意，由于API处于不断发展阶段，因此上述信息可能在一个多月左右后仍然不可靠。

试图从外面设置阴影DOM的样式

1 个答案: