我知道规范目前只允许::slotted 的复合选择器,即 ::slotted(my-first + my-second)
是不允许的,但这样的事情应该有效吗?
::slotted(x-first) + ::slotted(x-second) { /* css */ }
有什么方法可以定位开槽的 sibling (除了全局 css 之外)?如果没有,我应该在哪里提出这样的请求?谢谢。
最佳答案
当然可以选择siblings
的 slots / slotted
.
您不能做的事情是选择一个已经开槽并且不是顶级节点的元素。
选择 sibling :
slot[name=<slotname>] ~ <selector>
选择开槽的顶级节点
::slotted(<compound-selector>)
A compound-selector包含标签/类别/ID/名称等,但不能有任何combinators .喜欢<space>
例如。
.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 every slotted element - YES */
color: red;
}
slot[name=slot1] { /* slot1 itself - 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>
更多here .
slotted elements (coming from light DOM), ::slotted(selector) allows to select slotted elements themselves, but not their children.
关于CSS:如何在 Shadow DOM 根目录中定位::有槽的 sibling ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49678342/