我试图在 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) { ... }
做？
最佳答案
影子 DOM 规范目前仍在开发中，其大部分功能时时刻刻都在发生根本性的变化。
要从外部设置 shadow DOM 元素的样式取决于您的浏览器是否依赖于(过时的)peusdo-element exposure 或新的 css shadow dom 选择器 ^^ (猫)和 ^ (帽子)
如果浏览器支持新语法，您可以使用帽子(^)选择器简单地输入元素阴影 dom，或者如果您希望跨越所有阴影边界，您可以使用猫(^^)选择器来这样做.
如果浏览器尚不支持它，您需要通过向其添加伪属性<shadow-element peusdo="myname" /> 来将您希望设置样式的元素公开为其父元素的伪元素。 ，然后在您的 css 中引用该伪元素 shadow-host::myname
至于你的“奖励”问题，你引用的是影子主机元素，但前提是影子主机是 <bar>。元素，如果省略第二个 :host你引用的影子主机是 <bar>元素或有一个作为其祖先。
请注意，由于 API 处于不断开发中，上述信息可能在超过一个月左右的时间后仍不可靠。
关于javascript - 尝试从外部设置影子 DOM 的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20712576/