将类添加到开槽元素 (?)

Question

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

我目前正在处理的组件是 "alert"。在它的渲染模板中，它有两个命名槽："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) remove/reset 影响它们的全局样式和 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 中分配的元素并向它们添加 class。它确实有效，但感觉很恶心。这是该组件的相关代码：

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);
    }
  })
}

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

Answer 1

在阴影 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>

将类添加到开槽元素 (?)

Adding classes to slotted elements (?)

web-component

lit-element

将 类 添加到开槽元素 (?)

Adding classes to slotted elements (?)

web-component

lit-element

将类添加到开槽元素 (?)