Webcomponents:子级中的相邻兄弟选择器

问题描述

如何在Webcomponents中定位以下内容? (ShadomDom V1和自定义元素V1)

How can you target the following in Webcomponents? (ShadomDom V1 & Custom Elements V1)

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

在下面...

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

如果我将其放在分页元素样式中，则它不起作用.如果我将:host + :host放在分页项内，则它不起作用.

If I put it inside the pagination element style, it does not work. If I put :host + :host inside the pagination-item, it does not work.

如何在没有黑客的情况下实现这一目标?如果不能的话，这似乎在可组合性方面是一个巨大的问题...

How can you achieve this without hacks?If you can't it seems like this is a huge problem in composability...

推荐答案

默认情况下，它应该可以正常工作(不是指margin- left ?).

It should work by default (didn't you mean margin-left?).

如果没有，则可以在容器中使用:not(:first-child)(如果它也是Shadow DOM):

If not you can use :not(:first-child) in the container (if it's also a Shadow DOM):

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

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

Or you can use it in the <position-item> element:

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

---

注意:::slotted伪元素中的选择器仅限于性能问题:

---

Note : Selectors in ::slotted pseudo elements are restricted to counpound selectors for performance concerns:

这篇关于Webcomponents:子级中的相邻兄弟选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！