Webcomponents：孩子中的相邻兄弟选择器

Question

如何在 Webcomponents 中定位以下内容？ （ShadomDom V1 和自定义元素 V1）

pagination-item + pagination-item {
   margin-right: 10px;
}

在下面……

<pagination>
    <pagination-item></pagination-item>
    <pagination-item></pagination-item>
</pagination>

如果我把它放在分页元素样式中，它就不起作用。如果我将:host + :host 放在分页项中，它不起作用。

如何在没有 hack 的情况下实现这一目标？ 如果你不能，这似乎是可组合性的一个大问题......

Answer 1

它应该默认工作（你不是说margin-left吗？）。

如果不是，您可以在容器中使用 :not(:first-child)（如果它也是 Shadow DOM）：

::slotted(pagination-item:not(:first-child)) {
    margin-right: 10px;
}

或者你可以在<position-item>元素中使用它：

:host(:not(:first-child)) {
    margin-right: 10px;
}

---

注意：::slotted 伪元素中的选择器仅限于 performance concerns 的复合选择器：

::content 可以采用任意选择器，::slotted 只能采用复合选择器（在括号中）。这个限制的原因是在性能方面使选择器样式引擎友好。在 v0 中，很难避免由跨越阴影边界的任意选择器导致的性能损失。