当主dom包含类时如何更改Shadow Dom中元素的css

艾尔·阿曼(Al Ameen)

这是代码:

<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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章