Webcomponents:子级中的相邻兄弟选择器 [英] Webcomponents: Adjacent sibling selectors in children

问题描述

如何在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:

::content可以采用任意选择器，而::slotted只能采用复合选择器(在括号中).这种限制的原因是，就性能而言，使选择器样式引擎友好.在v0中，很难避免由于跨阴影边界的任意选择器而导致的性能损失.

While ::content can take any arbitrary selector, ::slotted can only take a compound selector (in the parenthesis). The reason of this restriction is to make a selector style-engine friendly, in terms of performance. In v0, it is difficult to avoid a performance penalty caused by an arbitrary selector which crosses shadow boundaries.

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