如何在 Webcomponents 中定位以下内容? (ShadomDom V1 & 自定义元素 V1)
pagination-item + pagination-item {
margin-right: 10px;
}
在下面...
<pagination>
<pagination-item></pagination-item>
<pagination-item></pagination-item>
</pagination>
如果我把它放在分页元素样式中,它不起作用。如果我将 :host + :host
放在分页项中,它就不起作用。
如何在不使用黑客的情况下实现这一目标? 如果你做不到,这似乎是可组合性中的一个大问题......
最佳答案
它应该默认工作(你不是说 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 的化合物选择器:
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.
关于css - Web 组件 : Adjacent sibling selectors in children,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41305306/