unwrapElement

Resolves a possibly reactive element target into an HTMLElement. Raw elements are returned as-is, Vue component instances are resolved through $el, and empty values return null.

Use it when a composable accepts either plain DOM nodes or Vue component refs but needs a DOM element internally.

Importing

import { unwrapElement } from '@almighty-shogun/common';

Usage

import { ref } from 'vue';
import { unwrapElement } from '@almighty-shogun/common';

const panel = ref<HTMLElement | null>(null);
const element = unwrapElement(panel);

Parameters

elementRef: MaybeRefOrGetter<NullableOrUndefinable<ComponentElement>>
Element, component instance, ref, or getter to resolve.

Returns

The resolved element or null.

Uses

• Nullable
• NullableOrUndefinable
• isHtmlElement

Type signature

declare function unwrapElement<TElement extends HTMLElement>(
    elementRef: MaybeRefOrGetter<NullableOrUndefinable<ComponentElement>>
): Nullable<TElement>;

type ComponentElement = HTMLElement | ComponentPublicInstance;