CSS:如何在Shadow DOM根中以:: sloted兄弟姐妹为目标? [英] CSS: How to target ::slotted siblings in Shadow DOM root?
问题描述
我知道规范目前仅允许:: slotted使用复合选择器,即不允许使用::slotted(my-first + my-second)
,但是这样的东西应该可以工作吗?
I know that the spec currently only allows compound selectors for ::slotted, i.e. ::slotted(my-first + my-second)
is not allowed, but should something like this be working?
::slotted(x-first) + ::slotted(x-second) { /* css */ }
是否有其他方法可以针对带槽的兄弟姐妹(全局css除外)?如果没有,我将在哪里提出这样的请求?谢谢.
Is there any way to target slotted siblings (other than with global css)? And if not, where would I file such a request? Thanks.
推荐答案
确定可以选择slots / slotted
中的siblings
.
您不能做不到的事情是选择一个已插入并且不是顶级节点的元素.
The thing you can not do is select a element which has been slotted and is not a top-level node.
选择同级兄弟:
slot[name=<slotname>] ~ <selector>
选择插槽式顶级节点
::slotted(<simple selector>)
一个简单的选择器包含标签/类/标识/名称等,但不得具有任何组合器.例如<space>
.
A simple selector contains a tag/class/id/name etc. but must not have any combinators. Like <space>
for example.
.myClass
确定
<anyTag>[<anyAttribute>[=<anyValue>]]
确定
.<myClass> > .<anotherClass>
否
示例
var element = document.querySelector('.templateMe');
var shadow = element.attachShadow({mode: 'open'});
var template = document.querySelector('.myTemplate');
shadow.appendChild(template.content.cloneNode(true));
<template class="myTemplate">
<style type="text/css">
::slotted([slot=slot1]) { /* slot1 itself - YES */
color: red;
}
slot[name=slot1] { /* slot1 itself (alternative) - YES */
text-decoration: underline;
}
slot[name=slot1] + .siblingA { /* slot1 siblingA (direct sibling) - YES */
color: green;
}
slot[name=slot1] ~ .siblingB { /* slot1 siblingB (any sibling) - YES */
color: orange;
}
slot[name=slot2]::slotted(.selectMeA) { /* slot2 TOP-LEVEL CHILD (slotted) - YES */
color: purple;
}
slot[name=slot2]::slotted(.selectMeB) { /* slot2 NOT TOP-LEVEL CHILD - NO */
font-weight: bold;
}
slot[name=slot2]::slotted(.selectMeC[name=myName]) { /* slot2 TOP-LEVEL CHILD (slotted) - YES */
color: khaki;
}
slot[name=slot2] + .siblingC { /* slot2 sibling - YES */
color: blue;
}
</style>
<div>
<slot name="slot1"></slot>
<div class="siblingA">Sibling A of Slot 1</div>
<div class="siblingB">Sibling B of Slot 1</div>
</div>
<hr/>
<div>
<slot name="slot2"></slot>
<div class="siblingC">Sibling C of Slot 2</div>
</div>
</template>
<div class='templateMe'>
<span slot="slot1">Im in Solt 1</span>
<span slot="slot2" class="selectMeA">
Im in Solt 2, im selectable.
<div class='selectMeB'>
NOT selectable (because no top level node of slotted)!
</div>
</span>
<span slot="slot2" class="selectMeC" name="myName">Im in Solt 2 too and selectable!</span>
</div>
这篇关于CSS:如何在Shadow DOM根中以:: sloted兄弟姐妹为目标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!