Как пользовательский элемент (angular) может определить, используется ли <slot>

Question

У меня есть этот пользовательский элемент с парой именованных слотов. В зависимости от состояния отображается один из слотов. Итак, предположим, что пользовательский элемент выглядит как

<slot></slot>
<slot name="small"></slot>
<slot name="medium"></slot>
<slot name="large"></slot>

Итак, этот компонент используется следующим образом:

<p>default</p>
<div slot="small"><p>small</p></div>
<div slot="medium"><p>medium</p></div>
<div slot="large"><p>large</p></div>

В основном, если состояние пользовательского элемента равно medium, он покажет medium слот. Но если средний слот не используется / не определен, он должен показывать слот по умолчанию. Возможно ли что-то подобное, как я могу определить, используется ли слот?

Answer 1

Оказывается, вы можете проверить, есть ли в слоте элементы. Просто сделай

element.shadowRoot.querySelector('slot[name=small]').assignedElements()[0];