角度元素:即使为空也显示插槽

时间:2019-07-12 09:12:09

标签: angular web-component angular-elements

我正在使用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(并且样式也越来越多,例如空白,背景-使元素成为元素)看起来很丑)

我该怎么办?

1 个答案:

答案 0 :(得分:0)

我通过在CSS中使用:slotted()选择器修复了此问题。这是样式化插槽内容的唯一方法。您可以参考:slotted()here