Angular 元素：插槽即使为空也会出现

Question

我正在使用 Angular 元素创建 UI 套件。我正在使用插槽进行内容投影。问题是每当我使用插槽时，当插槽内容为空时 - 插槽的 dom 元素仍然存在。

这是我正在使用的 UI 组件的代码

<div class="portlet">
 <div class="portlet-header-top">
      <slot class="portlet-header__icon" name="header_icon">
      </slot>
      <slot class="portlet-header__title" name="header_top_title">
      </slot>
      <slot class="portlet-header__right" name="header_top_right">
      </slot>
    </div>
    <div class="portlet-header-bottom">
      <slot class="portlet-header__title" name="header_bottom_title"></slot>
    </div>
</div>

以这个为例，即使用户没有使用 header_icon、header_top_title、header_top_right 插槽 -> 这些插槽已经注入 DOM（还有一些样式，比如边距、背景——这让元素看起来很丑）

我能为此做什么？

Answer 1

我在 css 中使用 :slotted() 选择器解决了这个问题。这是设置开槽内容样式的唯一方法。你可以参考 :slotted() here

Angular 元素：插槽即使为空也会出现

Angular Elements: Slots appearing even when empty

web-component

angular

angular-elements