CSS Shadow dom：是否有 /deep 选择器的替代方案？

Question

据我所知，不推荐使用 /deep 选择器来选择影子 dom 子项。所以我正在寻找另一种解决方案。

CSS 作用域旨在为升序选择器提供解决方案，但不为降序选择器提供解决方案。

鉴于这个 dom ：

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

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

感谢您的帮助

Answer 1

如何在脚本中编写选择器来到达.child元素？

要访问 Shadow DOM 中的元素，您应该使用shadowRoot该元素的属性。

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

注意：Shadow DOM 必须是在开放模式下创建的。

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

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

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

注意：::slotted仅当您在 light DOM 中有使用<slot>.

/deep 选择器有替代方案吗？

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

一个非常新的提案，带有::part伪::theme元素可以交还一些控制权，但不会很快实施。

在此之前，主要的解决方法是使用CSS 自定义属性。

然而，这两个解决方案必须由 Web 组件设计者实现，否则不能被覆盖。