Dealing with Angular components in SL slots

[brgrz]

Describe the bug

Drawer header provides header-actions slot which docs state is used for inserting additional icons, preferrably sl-icon-button. We have reusable components which are icon button plus some additional markup&code and this is where default flex positioning for header-actions fails.

This issue happens everywhere where slot provides some default styling provided by SL but the inserted content is not exactly what the slot expects for instance slot might expect an sl-icon but what we insert is a custom component or a div around an icon.

Demo

Our structure

List/grid component will have a SL drawer component defined

<sl-drawer #drawer>

	<div slot="label" #drawerHeader></div>

	<div slot="header-actions" #drawerHeaderActions></div>

	<ng-container *ngIf="selectedRowId">

		<app-asset-editing [itemId]="selectedRowId" (canceled)="onItemCancel()" (itemSaved)="onItemSaved($event)"
			[drawerHeader]="drawerHeaderRef" [drawerHeaderActions]="drawerHeaderActionsRef"
			[drawerFooter]="drawerFooterRef"></app-asset-editing>

	</ng-container>

	<ng-container *ngIf="!selectedRowId">

		<app-asset-editing (canceled)="onItemCancel()" (itemSaved)="onItemSaved($event)" [drawerHeader]="drawerHeaderRef"
			[drawerHeaderActions]="drawerHeaderActionsRef" [drawerFooter]="drawerFooterRef"></app-asset-editing>

	</ng-container>

	<div slot="footer" #drawerFooter></div>

</sl-drawer>

Details/edit page can provide contents for SL drawer's slot using Angular injection features:

...
<span *ngIf="drawerHeader" [appendTo]="drawerHeader">{{itemName}}</span>

<app-notifications-bell *ngIf="drawerHeaderActions" [appendTo]="drawerHeaderActions"></app-notifications-bell>
...

In this case, an extra div will be present in the DOM within header-actions slot, so it will end up like this:

So there's an extra div and the Angular components host element, both of which mess up the default provided SL styles.

Obviously we cannot let go of using Angular components, we could in certain cases but not when there's clear reusable functionality and markup references with injection capabilities actually work great.

Screenshots

Flex positioning clearly fails due to the hierarchy being broken

It is also very painful to introduce styles that target those "in-between" levels in DOM. But atm this is my only option.

[claviska]

We style slotted icons as a convenience, but you may have to add your own styles if the markup is different.

Does it help to apply display: contents to the <div> that Angular is adding?