Skip to content

[email protected] - New assignNode property for the tag slot 🚀

Compare
Choose a tag to compare
@UpperCod UpperCod released this 08 Mar 03:55
· 30 commits to master since this release

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);