CSS shadow dom : 是否有 /deep 选择器的替代品？

Question

据我所知，/deep selector 已弃用 select shadow dom children。所以我正在寻找另一种解决方案。

CSS scoping 看起来为升序 selector 提供解决方案，但不为降序提供解决方案。

鉴于此 dom :

<script>
    $('.child').addClass('reached');
</script>
<div id="parent">
    #shadow-root
        <div class="child"></div>
    /shadow-root
</div>

如何在脚本中编写 selector 以到达 .child 元素？

感谢您的帮助

Answer 1

How can I write the selector in the script to reach the .child element?

要到达阴影 DOM 中的元素，您应该在元素上使用 shadowRoot 属性。

var parent = document.querySelector( '#parent' )
var child = parent.shadowRoot.querySelector( '#child' )
child.classList.add( 'reached' )

注意：阴影 DOM 必须是在打开模式下创建的。

var sh = parent.attachShadow( { mode: 'open' } )

var parent = document.querySelector( '#parent' )
var sh = parent.attachShadow( { mode: 'open' } )
sh.innerHTML = `<style>
                    div.reached { color: green }
                </style>
                <div id="child">Child</div>
                `
var child = parent.shadowRoot.querySelector( '#child' )
child.classList.add( 'reached' )

<div id="parent">
</div>

注意：仅当 DOM 中的元素用 <slot> 显示时才需要 ::slotted。

Is there alternative to /deep selector?

简短的回答是否定的。由于 Shadow DOM 旨在将 Shadom DOM 与主页隔离开来，因此 /deep 有点异端。

A very new proposal，带有 ::part 和 ::theme 伪元素可以恢复一些控制，但不会很快实现。

在那之前，主要的解决方法是使用 CSS custom properties.

然而，这 2 个解决方案必须由 Web 组件设计人员实施，否则不能被覆盖。

CSS shadow dom : 是否有 /deep 选择器的替代品？

CSS shadow dom : is there alternative to /deep selector?

css

shadow-dom