Question

在处理轻型组件库时，我遇到了一个尴尬的场景。

我当前正在使用的组件是“警报”。在其渲染模板中，有两个命名的插槽：“标题”和“文本”。

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

将类添加到空位元素（？）

1 个答案: