English
Search…
⌃K
Links

use-child-nodes

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

Modulo

import { useChildNodes } from "@atomico/hooks/use-child-nodes";

Syntax

const [childNodes, update] = useChildNodes();
Where :
  1. 1.
    childNodes : List of nodes that do not belong to the webcomponent render.
  2. 2.
    update: Callback that forces a new childNodes scan.

Example

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