时间戳

首页 > 解决方案 > 当主dom包含一个类时如何更改shadow Dom中元素的css

html - 当主dom包含一个类时如何更改shadow Dom中元素的css

问题描述

这是代码：

<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 类的父元素时，我想用 class child-div 更改元素的 css。是否可以从css中做

.parent-div .child-div{
   display:none
}

标签： htmlcssshadow-dom

解决方案

您可以: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>

推荐阅读