当主要 dom 包含 class 时，如何更改影子 Dom 中元素的 css

Question

这是代码：

<html>
  <div class="parent-div">
    <div id="shadow_host">
      #shadow-root(open)          
    <div class="child-div">some random things</div>
    </div>
  </div>      
</html>

我已将阴影 dom 附加到元素。我想用 class child-div 更改元素的 css 当主 dom 有一个带有 class parent-[= 的父元素时24=]。是否可以从 css 像

那样做

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

Answer 1

您可以使用 ::shadow 选择器为阴影中的元素设置样式 DOM。

您还可以使用 javascript 的 .innerHTML 函数将 <style> 标签添加到影子 DOM 中，并按此方式设置样式。

Answer 2

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

当主要 dom 包含 class 时，如何更改影子 Dom 中元素的 css

How to change css of an element in shadow Dom when the main dom contains a class

html

css

shadow-dom