Angular Elements: Slots appearing even when empty

Question

I'm using Angular Elements for creating a UI kit. I'm using slots for content projection. The problem is whenever i'm using slots, and when the slots content is empty - the slot's dom element is still there.

Here's the code of the UI component i'm using

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

In this one as an example, even the user didn't used header_icon, header_top_title, header_top_right slots -> those slots are already injected the the DOM (and there styles are coming too such as margin, background - which make the element looks ugly)

What can i do for this?

Answer 1

I fixed this by using :slotted() selector in css. That's the only way to style slotted contents. You can refer about :slotted() here