这是代码:
<html>
<div class="parent-div">
<div id="shadow_host">
#shadow-root(open)
<div class="child-div">some random things</div>
</div>
</div>
</html>
我已将影子球附加到元素上。当主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
}
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句