CSS阴影区:有替代/deep选择器吗？

Question

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

CSS范围界定希望为升序选择器提供解决方案，但不为下行选择器提供解决方案。

考虑到这一点：

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

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

谢谢你的帮助

Answer 1

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

要到达Shadow中的元素，应该在元素上使用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>

​

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

是否有替代/deep选择器？

简短的回答是否定的。由于Shadow DOM的目标是将Shadom DOM与主页隔离开来，所以/deep是一种异端。

带有::part和::theme伪元素的::part可以返回一些控制权，但它不会很快实现。

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

但是，这2种解决方案必须由Web组件设计器实现，否则不能过度使用。