当主DOM包含一个类时，如何更改Shadow DOM中元素的CSS？

Question

当主DOM包含一个类时，如何更改Shadow DOM中元素的CSS？

8

以下是代码：

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

我已经将一个Shadow DOM添加到元素中。我希望每当主DOM具有类名为parent-div的父元素时，更改具有类名child-div的元素的CSS。是否可以通过CSS实现？

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

- Al Ameen

3个回答

1

你可以使用::shadow选择器来为Shadow DOM中的元素设置样式。

你也可以使用JavaScript的.innerHTML函数向Shadow DOM添加<style>标签并进行样式设置。

- JensW

0

#shadow_host::part(native) {
  color: black;
  border: dashed 2px black;
  background-color: #fec0ff;
}

#shadow_host::part(button):hover {
  background-color: #fd8fff;
}

- Bartho Bernsmann

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Supersharp · Accepted Answer

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