Javascript 如何访问插槽中自定义元素的light dom？

所以，基本上我有一个

ui按钮

，它是一个分子。此元素由原子组成的

ui文本

和

ui图标

元素组成。当按钮有图标时，我想对文本应用

左边距

但是，文本是
ui-text
的阴影dom中的
span
元素。这意味着在
ui按钮中
我有一个嵌套的阴影dom，对应于
ui文本
：

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

如何通过CSS从父元素访问内部阴影dom？其思想是在
ui按钮中应用类似的内容：

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

理想情况下，您可以在
阴影DOM中使用
：：slotted（ui图标+ui文本）{margin left:10px}
，以便在
元素之后的
元素中添加左边距

实际上，il不可能，因为：slotted（）
只允许复合选择器，而不允许使用
+
、
、
~
和
（空格）构造复杂选择器。你必须根据自己的需要找到解决办法

在上面的示例中，您可以将
：first child
伪类与
：not（）
伪类函数结合使用

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

您还可以阅读另一个解决方案，其中包含
：host（）
您是否在ui按钮阴影DOM中尝试了类似
ui图标+ui文本{margin left:10px}
。事实上，如果将
ui文本
直接放置在
ui按钮
中，而不是
插槽
，则它可以工作。否则不要。
::slotted( :not(:first-child) ) {
    left-margin: 10px 
}