gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 22:55:55 25 4
gpt4 key购买 nike

这是代码:

<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 类的父元素时,我想用 child-div 类更改元素的 css。是否可以像

这样从 css 做
.parent-div .child-div{
display:none
}

最佳答案

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

关于html - 当主 dom 包含一个类时如何更改 shadow Dom 中元素的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55903555/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com