Custom events and slots

A Shadow DOM component mounted into an element of a page, such as an embeddable widget, cannot take props from that page. It talks back with custom events, and the page passes content in through slots.

emit()

this.emit(name, detail) dispatches a custom event from the component's host element. It bubbles and is composed, so it leaves the shadow root and the page can listen to it like any event.

// In the component
this.emit('rate', { stars: 4 });

// On the page
host.addEventListener('rate', (event) => console.log(event.detail.stars));

Between Signy components without Shadow DOM, pass a callback prop instead, such as onChange=${...}.

Slots

Children of the host element in the page show where the component renders a <slot>. A child with slot="name" goes to <slot name="name">. getSlottedElements(name) lists them, hasSlottedContent(name) checks for any, and onSlotChange(name, callback) follows changes. Call onSlotChange() in setup(), it is removed on unmount.