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
Copy < 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:
Copy < 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
Copy 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