Overview
Purpose: allows a component to track its light DOM content as state. This helps a component satisfy the Gold Standard checklist item for monitoring Content Changes (Will the component respond to runtime changes in its content, including distributed content?).
This mixin works at the beginning of the Elix render pipeline:
events ➞ setState → render DOM → post-render
Expects the component to provide:
- A default
<slot>
element in its shadow root. Such a template can be defined using ShadowTemplateMixin.
Provides the component with:
content
state member that holds the component's current, flattened set of light DOM child nodes.slotchange
event listener that invokessetState
with the updated content.
Usage
import SlotContentMixin from "elix/src/base/SlotContentMixin.js";
class MyElement extends SlotContentMixin(HTMLElement) {}
Example
This component shows a count of how many children it has:
class CountingElement extends SlotContentMixin(ReactiveMixin(HTMLElement)) {
[internal.render]() {
if (!this.shadowRoot) {
let root = this.attachShadow({ mode: "open" });
root.innerHTML = `
<span id="count"></span>
<slot></slot>
`;
}
// Get the flattened list of children.
const content = this[internal.state].content;
const count = content ? content.length : 0;
this.shadowRoot.querySelector("#count").textContent = count;
}
}
Tracking content changes
The standard DOM API for tracking content changes is to use the slotchange
event. However, in components written in functional-reactive style, the component should track its content as part of its state. This is the focused task of SlotContentMixin
.
When a component is mounted (i.e., connected to the document), SlotContentMixin
sets the slot's current, flattened list of assigned nodes as the component state, in [internal.state].content
. It also begins listening to slotchange
events on the component's default slot. When a slotchange
event fires, the mixin invokes setState
with the new [internal.state].content
.
API
Used by classes AlertDialog, AutoSizeTextarea, Dialog, Drawer, DrawerWithGrip, FilterComboBox, Overlay, PlainAlertDialog, PlainAutoSizeTextarea, PlainDialog, PlainDrawer, PlainDrawerWithGrip, PlainFilterComboBox, PlainOverlay, PlainPopup, PlainTabButton, PlainToast, Popup, SlotItemsMixin, TabButton, and Toast.
content Slot property
See contentSlot.