据我所知,不建议使用/ deep选择器来选择shadow dom子级。所以我正在寻找另一种解决方案。
CSS scoping旨在为升序的选择器提供解决方案,但不为降序的选择器提供解决方案。
鉴于此dom:
<script>
$('.child').addClass('reached');
</script>
<div id="parent">
#shadow-root
<div class="child"></div>
/shadow-root
</div>
如何在脚本中编写选择器以到达.child元素?
谢谢您的帮助
答案 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组件设计人员实现,否则不能被覆盖。