1

我正在使用 Angular Elements 来创建 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（并且还会出现诸如边距、背景等样式 - 这使元素看起来很丑）

我能为此做些什么？

4

1 回答 1

0

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

于 2019-08-01T05:22:27.683 回答