(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 插槽。但是，如果中插槽不是 used/defined，它应该显示默认插槽。这样的事情是否可能，我如何检测是否使用了插槽？

Answer 1

事实证明，您可以检查槽是否有元素。就这样

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