Web组件：儿童中相邻的兄弟选择器

Question

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

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

以下......

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

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

如何在没有黑客的情况下实现这一目标？ 如果你看起来这似乎是可组合性方面的一个大问题......

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中，很难避免由跨越阴影边界的任意选择器引起的性能损失。