javascript - 尝试从外部设置 shadow DOM 的样式

我正在尝试设置 shadow dom 中的文本样式，但没有成功。唯一的事情是我想从 shadow 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) { ... }

做？

最佳答案

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

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

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

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

请注意，由于 API 不断发展，上述信息可能在超过一个月左右后仍然可靠。

关于javascript - 尝试从外部设置 shadow DOM 的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20712576/