Al *_*een 8 html css shadow-dom
这是代码：
<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
}
您可以:host-context()在 Shadow DOM 样式中使用 CSS 功能。
:host-context(.parent-div) .child-div{
display:none
}
: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>
`