useParentElement

v0.0.15testeddemo

Reactive `parentElement` of a given element (or the current component instance's root element when no target is supplied). Resolves the target through `unrefElement`, so it accepts plain elements, template refs, component instances, getters and computed refs. A single `immediate` watcher tracks the resolved target and re-reads its parent only when the element itself changes — no extra lifecycle hooks or always-on observers. SSR-safe: stays `undefined` until the target is resolved on the client.

Source Tests

Examples

// Parent of the current component's root element
const parent = useParentElement();

// Parent of a specific template ref
const el = useTemplateRef<HTMLElement>('el');
const parent = useParentElement(el);

Demo

Loading demo…

Signature

export function useParentElement(
  element: MaybeComputedElementRef | MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined> = useCurrentElement<HTMLElement | SVGAElement>(),
): UseParentElementReturn{ ... }

Parameters

Parameter	Type	Default	Description
`element`?	`any`	`useCurrentElement<HTMLElement \| SVGAElement>()`	Target element/ref/getter; defaults to the current instance's root element

Returns

Readonly<ShallowRef<HTMLElement | SVGElement | null | undefined>>A read-only shallow ref of the resolved parent element