1 of 1

use-child-nodes

Captures all nodes not created by the webcomponent render, ideal for apply slot polyfill in LightDOM.

Modulo

Syntax

Where :

childNodes : List of nodes that do not belong to the webcomponent render.
update: Callback that forces a new childNodes scan.

Example

From the example we can highlight that the webcomponent will use all the children not created by the h1 type and will associate the onclick handler with them.

function component() {
  const [childNodes] = useChildNodes();
  return (
    <host>
      {childNodes
        .filter((node) => node.localName == "h1")
        .map((Title) => (
          <Title onclick={() => console.log("click h1!")} />
        ))}
    </host>
  );
}