CSS：如何在阴影DOM根中定位：：slotted同胞？

我知道规范目前只允许复合选择器用于：：slotted，也就是说，

：：slotted（我的第一个+我的第二个）

是不允许的，但是类似的东西应该起作用吗

::slotted(x-first) + ::slotted(x-second) { /* css */ }

---

是否有任何方法可以针对有槽兄弟姐妹（除了使用全局css）？如果没有，我会在哪里提出这样的请求？谢谢。

放置在插槽中的DOM应该由拥有该DOM的CSS控制，而不是由自定义元素控制

Web组件允许对放置在插槽中的DOM进行非常小的CSS控制。几乎只是顶层元素（以及由子节点自动继承的内容）

---

这是一个有意识的决定，可能永远不会改变。

确保您可以选择

插槽/插槽的
兄弟姐妹

您可以选择一个已开槽且不是顶级节点的元素

选择同级：

slot[name=]~

选择时隙顶级节点

：：slotted（）

A包含标记/类/id/名称等，但不能有任何标记。比如说

.myClass
正常

[[=]
确定

否

示例


var-element=document.querySelector（'.templateMe'）；
var shadow=element.attachShadow（{mode:'open'}）；
var template=document.querySelector（'.myTemplate'）；
appendChild（template.content.cloneNode（true））

：：开槽（[slot=slot1]）{/*slot1每个开槽元素-是*/
颜色：红色；
}
插槽[name=slot1]{/*slot1本身-是*/
文字装饰：下划线；
}
slot[name=slot1]+.siblingA{/*slot1-siblingA（直接同级）-是*/
颜色：绿色；
}
slot[name=slot1]~.siblingB{/*slot1-siblingB（任何同级）-是*/
颜色：橙色；
}
slot[name=slot2]：：slotted（.selectMeA）{/*slot2顶级子级（slotted）-是*/
颜色：紫色；
}
slot[name=slot2]：：sloted（.selectMeB）{/*slot2不是顶级子级-否*/
字体大小：粗体；
}
slot[name=slot2]：：slotted（.selectMeC[name=myName]）{/*slot2顶级子级（slotted）-是*/
颜色：卡其色；
}
slot[name=slot2]+.siblingC{/*slot2同级-是*/
颜色：蓝色；
}
插槽1的同级A
插槽1的同级B

插槽2的同级C
我是索特一号
我在Solt 2中，我是可选择的。
不可选择（因为没有槽的顶级节点）！
我也在Solt 2中，而且是可选的！
这与：：slotted（x-first+x-second）有何不同？谢谢，我还读到，禁止使用：：slotted的复杂选择器的决定与针对后代时的性能有关。因此，我曾希望有一种方法可以针对有槽兄弟姐妹，因为它们是顶级元素。感谢您详细的回答。在您的示例中，我要查找的是：
slot[name=slot2]：：slotted（.selectMeA+.selectMeC）
，如果我理解正确的话，这是不可能的，尽管两者都是顶级子级。这是正确的，因为您使用的是
+
，这是我尝试过的组合词
：：slotted（.selectMeA）+:slotted（.mec）
但这不是很好<代码>：：slotted
似乎是这一行的结尾。有人知道这是出于某种原因，还是Combinator在将来可能会工作，但现在还不知道？我想要它们