web-component - 向开槽元素添加类(？)

Question

我在处理 lit-element 组件库时遇到了一个尴尬的场景。

我目前正在处理的组件是一个“警报”。在它的渲染模板中，它有两个命名槽:“标题”和“文本”。

<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>