❯
fn

useParentElement

v0.0.14testeddemo

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

ts
// Parent of the current component's root element
const parent = useParentElement();
ts
// Parent of a specific template ref
const el = useTemplateRef<HTMLElement>('el');
const parent = useParentElement(el);

Demo

Loading demo…

Signature

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

Parameters

ParameterTypeDescription
element?MaybeComputedElementRef | MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>Target element/ref/getter; defaults to the current instance's root element

Returns

UseParentElementReturnA read-only shallow ref of the resolved parent element