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. 1.
    childNodes : List of nodes that do not belong to the webcomponent render.
  2. 2.
    update: Callback that forces a new childNodes scan.

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.
Copy link
Edit on GitHub