javascript - 如何访问插槽内自定义元素的 light dom？

Question

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

但是，文本是 ui-text 的影子 dom 内的 span 元素。这意味着在 ui-button 里面我有一个嵌套的 shadow 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

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

实际上不可能因为::slotted()只允许复合选择器，不允许使用 + 构造的复杂选择器, > , ~和 (空间)。您必须根据需要找到解决方法。

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

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

您还可以阅读 this related post使用 :host() 的替代解决方案.