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


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


const [childNodes, update] = useChildNodes();

Where :

  1. childNodes : List of nodes that do not belong to the webcomponent render.

  2. update: Callback that forces a new childNodes scan.


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

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 updated