CSS shadow dom:/ deep选择器有替代选择吗?

时间:2018-06-25 19:14:44

标签: css shadow-dom

据我所知,不建议使用/ deep选择器来选择shadow dom子级。所以我正在寻找另一种解决方案。

CSS scoping旨在为升序的选择器提供解决方案,但不为降序的选择器提供解决方案。

鉴于此dom:

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

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

谢谢您的帮助

1 个答案:

答案 0 :(得分:3)

  

如何在脚本中编写选择器以到达.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>

注意:仅当::slotted显示的轻型DOM中有元素时,才需要<slot>


  

/ deep选择器有替代选择吗?

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

带有::part::theme伪元素的very new proposal可能会带来一些控制权,但是不会很快实现。

在此之前,主要的解决方法是使用CSS custom properties

但是,这2个解决方案必须由Web组件设计人员实现,否则不能被覆盖。