use-child-nodes
Captures all nodes not created by the webcomponent render, ideal for apply slot polyfill in LightDOM.
Modulo
1
import { useChildNodes } from "@atomico/hooks/use-child-nodes";
Copied!
Syntax
1
const [childNodes, update] = useChildNodes();
Copied!
Where :
- 1.
childNodes: List of nodes that do not belong to the webcomponent render. - 2.
update: Callback that forces a newchildNodesscan.
Example
1
function component() {
2
const [childNodes] = useChildNodes();
3
return (
4
<host>
5
{childNodes
6
.filter((node) => node.localName == "h1")
7
.map((Title) => (
8
<Title onclick={() => console.log("click h1!")} />
9
))}
10
</host>
11
);
12
}
Copied!
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.Last modified 2mo ago