useProxySlot

useProxySlot allows you to observe the nodes assigned to a slot and reassign them to another slot dynamically, example:

Input: Suppose we have a component that observe the slot[name="slide"] node

<my-component>
    <img slot="slide" src="slide-1"/>
    <img slot="slide" src="slide-1"/>
    <img slot="slide" src="slide-1"/>
</my-component>

output: thanks to useProxySlot you will be able to modify the assignment of the list nodes without losing the nodes in the process as normally happens with useSlot, example:

<my-component>
    <img slot="slide-1" src="slide-1"/>
    <img slot="slide-2" src="slide-1"/>
    <img slot="slide-3" src="slide-1"/>
</my-component>

Syntax and example

import { useRef } from "atomico";
import { useProxySlot } from "@atomico/hooks/use-slot";

function component() {
  const ref = useRef();
  const children = useProxySlot(ref);

  return (
    <host shadowDom>
      <slot name="slide" ref={ref} />
      {children.map((child, index) => (
        <slot name={(child.slot = "slide-" + index)} />
      ))}
    </host>
  );
}

All redirected hooks must exist under a slot

Live example

WebComponents.devWebComponents.dev

Ejemplo en vivo