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

【问题标题】：How to access light dom of custom element inside a slot?如何访问插槽内自定义元素的 light dom？
【发布时间】：2018-11-29 15:34:41
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：