atomico-hooks-dom

What problem does it solve?

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.

Core Features & Use Cases

• useSlot: Reactively observe assigned nodes of a slot and filter by type for typed, slotted content handling (e.g., dynamic card lists).
• useNodes: Observe light DOM children via MutationObserver for manual slot assignment workflows or when working with fragment markers and text nodes.
• useRender: Render virtual DOM into the light DOM from a shadow-rooted component to improve SEO, enable external styling, or place native form controls.
• useParent: Traverse composed or non-composed ancestor chains to locate parent components or elements for cross-component communication.
• Use Case: Build a card list that types and filters slotted items, renders a mirrored summary into the light DOM for SEO, and finds a containing form element across shadow boundaries to attach listeners.

Quick Start

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.