这是代码:
<html>
<div class="parent-div">
<div id="shadow_host">
#shadow-root(open)
<div class="child-div">some random things</div>
</div>
</div>
</html>
我已将影子 dom 附加到元素。当主 dom 有一个带有 parent-div 类的父元素时，我想用 child-div 类更改元素的 css。是否可以像
这样从 css 做.parent-div .child-div{
display:none
}
最佳答案
您可以在 Shadow DOM 样式中使用 :host-context() CSS 函数。
:host-context(.parent-div) .child-div{
display:none
}
document.querySelector( '#shadow_host' )
.attachShadow( { mode: 'open' } )
.innerHTML = `
<style>
:host-context(.parent-div) .child-div {
display:none
}
</style>
<div class="child-div">some random things</div>
`<div class="parent-div">
<div id="shadow_host">
</div>
</div> 关于html - 当主 dom 包含一个类时如何更改 shadow Dom 中元素的 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55903555/