Observe slotted nodes and light DOM children in Atomico components.
npx skills add https://github.com/atomicojs/atomico --skill atomico-hooks-dom
Please help me install this Agent Skill. Skill: atomico-hooks-dom Source: https://github.com/atomicojs/atomico/tree/main/.agents/skills/atomico-hooks-dom Command: npx skills add https://github.com/atomicojs/atomico --skill atomico-hooks-dom
Many Atomico web components need reliable ways to observe and interact with slotted content, light DOM children, and parent components while operating from inside a shadow DOM; manual DOM bookkeeping and inconsistent slot management make these tasks error-prone and fragile. This Skill centralizes reactive DOM observation and traversal into expressive hooks so components can respond to slot changes, track host children, render into the light DOM, and locate ancestor elements safely.
Use the atomico-hooks-dom hooks to observe slot changes with useSlot, track host children with useNodes, render content into the light DOM with useRender, and locate ancestor components with useParent.
High-intent search queries and answers about installing and using this skill.
You can observe slotted nodes in Atomico web components by using the useSlot hook to reactively track assigned slot nodes and filter them by type. This allows your component to dynamically respond to changes in slotted content.
Tracking light DOM children from inside a shadow DOM component is best handled by using MutationObserver-based hooks like useNodes. This approach allows shadow-rooted Atomico components to monitor host children, including fragment markers and text nodes, for manual slot assignment.
Yes, you can render virtual DOM into the light DOM to improve SEO in Atomico by using the useRender hook. This allows shadow-rooted components to project content externally, enabling search engine indexing and external styling.
To find a parent element across shadow DOM boundaries, you can use the useParent hook to traverse composed or non-composed ancestor chains. This enables safe cross-component communication and locating containing elements like forms.
Atomico supports manual slot assignment workflows by using the useNodes hook to observe light DOM children via MutationObserver. This provides reliable tracking of host children for manual assignment and fragment marker management.
When using MutationObserver for light DOM tracking in Atomico, you must ensure proper cleanup on unmount to avoid memory leaks. The observation is limited to tracking host children, fragment markers, and text nodes within the light DOM structure.
atomicojsCreate and consume cross-shadow-DOM contexts for Atomico web components.
quanngynxAnimate DOM changes with the View Transitions API.
atomicojsGuide JSX patterns for type-safe Atomico web components.
tc9011Integrate web-only libraries and DOM components into Expo apps via webviews.
