Skip to content

DistributedChildrenMixin.md

Latest commit

 

History

History
75 lines (57 loc) · 3.16 KB

DistributedChildrenMixin.md

File metadata and controls

75 lines (57 loc) · 3.16 KB
Raw

API Documentation

DistributedChildren

Mixin which defines helpers for accessing a component's distributed children as a flattened array or string.

The standard DOM API provides several ways of accessing child content: children, childNodes, and textContent. None of these functions are Shadow DOM aware. This mixin defines variations of those functions that are Shadow DOM aware.

Example: you create a component <count-children> that displays a number equal to the number of children placed inside that component. If someone instantiates your component like:

<count-children>
  <div></div>
  <div></div>
  <div></div>
</count-children>

Then the component should show "3", because there are three children. To calculate the number of children, the component can just calculate this.children.length. However, suppose someone instantiates your component inside one of their own components, and puts a <slot> element inside your component:

<count-children>
  <slot></slot>
</count-children>

If your component only looks at this.children, it will always see exactly one child — the <slot> element. But the user looking at the page will see any nodes distributed to that slot. To match what the user sees, your component should expand any <slot> elements it contains.

That is the problem this mixin solves. After applying this mixin, your component code has access to this.distributedChildren, whose length will return the total number of all children distributed to your component in the composed tree.

Note: The latest Custom Elements API design calls for a new function, getAssignedNodes that takes an optional deep parameter, that will solve this problem at the API level.

Kind: global class

distributedChildren.distributedChildNodes : Array.<Node>

An in-order collection of distributed child nodes, expanding any slot elements. Like the standard childNodes property, this includes text nodes.

Kind: instance property of DistributedChildren

distributedChildren.distributedChildren : Array.<HTMLElement>

An in-order collection of distributed children, expanding any slot elements. Like the standard children property, this skips text nodes.

Kind: instance property of DistributedChildren

distributedChildren.distributedTextContent : string

The concatenated text content of all distributed child nodes, expanding any slot elements.

Kind: instance property of DistributedChildren