将类添加到槽元素 (?)

Question

在处理光照元素组件库时，我遇到了一个尴尬的场景。

我目前正在处理的组件是“警报”。在它的渲染模板中，它有两个命名槽：“title”和“text”。

<div class="alert-item-content">
   <i class="alert-item-icon"></i>
   <slot name="title"></slot>
   <slot name="text"></slot>
</div>

分配给这些插槽的元素可能是任何有效的文本标签（h1、h2、h3 等）。我需要将插槽的分配元素定位到 A) 删除/重置影响它们的全局样式和 B) 添加对 UI 要求至关重要的特定样式。

因此，换句话说，一个人可能会提供一个“h5”，因为它在语义上是正确的，但作为一个警告标题，它应该始终显示相同。

例子：

<mult-alert>
  <mult-alert-item>
    <h5 slot="title">Notice Me</h5>
    <p slot="text">
      This is something you should probably
      <a href="#">pay attention to</a>
    </p>
  </mult-alert-item>
</mult-alert>

到目前为止，我能想到的唯一解决方案是查询 shadowRoot 中分配的元素并向它们添加一个类。它确实有效，但感觉很糟糕。这是来自组件的相关代码：

addClassesToSlottedNodes() {
  [{
    slotName: 'title',
    className: 'alert-item-title'
  }, {
    slotName: 'text',
    className: 'alert-item-text'
  }].forEach(n => {
    const slotNodes = this.shadowRoot
      .querySelector(`slot[name="${n.slotName}"]`)
      .assignedNodes();

    if (slotNodes && slotNodes.length) {
      slotNodes[0].classList.add(n.className);
    }
  })
}

有没有更好的方法来定位这些带槽的元素而不用这种方式添加类？或者，是否有更简洁的方法在组件模板中添加类？

Answer 1

在 Shadow DOM 的自定义元素模板中，您可以使用::slotted()CSS 函数来设置槽元素的 CSS 样式：

<style>
    slot[name=title]::slotted(*) {
        font-size: 20pt ;
        font-weight: bold ;
        color: red ;
    }
    slot[name=text]::slotted(*) {
        font-family: Arial ;
    }
</style>
<div class="alert-item-content">
    <i class="alert-item-icon"></i>
    <slot name="title"></slot>
    <slot name="text"></slot>
</div>