如何访问插槽内自定义元素的灯域

Question

所以，基本上我有一个ui-button，它是一个分子。该元素由作为原子的ui-text和ui-icon元素组成。当按钮有图标时，我想对文本应用margin-left。

但是，文本是ui-text的阴影dom内的span元素。这意味着在ui-button内部，我有一个嵌套的阴影dom，对应于ui-text:

<ui-button kind="primary" useForClick="someFn">
<ui-icon name="payment"></ui-icon>
<ui-text>Pay with card</ui-text>
<ui-button>

渲染：

ui-button
|__shadow dom
|__ui-icon
|__ui-text
|__shadow dom
|__span

如何通过CSS从父元素访问内部阴影dom？这个想法是在ui-button:中应用类似的东西

slot[name=text]::slotted(ui-text) span::slotted() {
margin-left: 10px;
}

Answer 1

理想情况下，您应该在<ui-button>Shadow DOM中使用::slotted( ui-icon + ui-text ) { margin-left: 10px }，以便在<ui-icon>元素之后为<ui-text>元素添加左边距。

实际上这是不可能的，因为::slotted()只允许复合选择器，而不允许用+、>、~和(空格(构造的复杂选择器。你必须根据自己的需要找到一个变通办法。

在上面的示例中，您可以将:not()伪类与:host()伪类函数结合使用。

::slotted( :not(:first-child) ) {
left-margin: 10px 
}

您也可以阅读这篇相关文章，了解CCD_21的替代解决方案。