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

Question

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

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

<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

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

实际上是不可能的，因为::slotted()仅允许复合选择器，而不是由+，>，~和（空格）构造的复杂选择器。您将必须根据需要找到解决方法。

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

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

对于:host()的替代解决方案，您也可以阅读this related post。