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

Question

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

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 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> 

注意：只有在使用<slot>显示light DOM中的元素时才需要::slotted 。

---

是否有/深度选择器的替代品？

简短的回答是否定的。 由于Shadow DOM旨在将Shadom DOM与主页隔离，所以/deep是一种异端邪说。

一个非常新的提议 ，使用::part和::theme伪元素可以给出一些控制权，但它不会很快实现。

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

但是，这两个解决方案必须由Web组件设计者实现，否则无法覆盖。