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

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> 影子 DOM 中使用 ::slotted( ui-icon + ui-text ) { margin-left: 10px }，以便在 <ui-icon> 之后的 <ui-text> 元素中添加左边距元素.

实际上不可能，因为 ::slotted() 只允许复合选择器，不允许使用 +、>、~ 和 [= 构造的复杂选择器32=]（space）。您必须根据需要找到解决方法。 </p> <p>在上面的示例中，您可以使用 <code>:first-child 伪 class 结合 :not() 伪 class 函数。

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

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

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

How to access light dom of custom element inside a slot?

javascript

css

web-component

shadow-dom