This new property allows working with slots in manual assignment mode in an agile way. For example:
import { c } from "atomico";
import { useChildNodes } from "@atomico/use-child-nodes";
const MyComponent = c(() => {
const childNodes = useChildNodes();
return (
<host shadowDom={{ slotAssignment: "manual" }}>
{childNodes
.filter((el) => el instanceof HTMLElement)
.map((child: HTMLElement) => (
<slot assignNode={child}></slot>
))}
</host>
);
});
customElements.define("my-component", MyComponent);