drab - base

import "drab/base/define";

<drab-base>
	<button data-trigger class="mb-4">Trigger Example</button>
	<p data-content>Selected using data attributes by default.</p>
</drab-base>

<drab-base content="p">
	<p>Selected via a CSS selector.</p>
</drab-base>

Overview

Defined in: base/index.ts:21

Each element in the library extends the Base class. It provides methods for selecting elements via HTML attributes along with other helpers.

By default, triggers and content will be selected via the data-trigger and data-content attributes. Alternatively, you can set the trigger or content attribute to a CSS selector to change the default selector from [data-trigger] or [data-content] to a selector of your choosing. This can be useful if you have multiple elements within one another.

Each element can have multiple triggers, but will only have one content.

Extends

HTMLElement

Extended by

Constructors

new Base()

new Base(): Base

Defined in: base/index.ts:31

Returns

Base

Overrides

HTMLElement.constructor

Accessors

event

Get Signature

get event(): keyof HTMLElementEventMap

Defined in: base/index.ts:42

Event for the trigger to execute.

For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.

Default

"click";

Returns

keyof HTMLElementEventMap

Set Signature

set event(value): void

Defined in: base/index.ts:46

Parameters

value

keyof HTMLElementEventMap

Returns

void

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

Returns

void

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

Returns

void

destroy()

destroy(): void

Defined in: base/index.ts:178

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

Returns

void

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

Returns

void

getContent()

getContent<T>(instance): T

Defined in: base/index.ts:74

Type Parameters

• T extends HTMLElement = HTMLElement

Parameters

instance

() => T

The instance of the desired element to validate against, ex: HTMLDialogElement. Defaults to HTMLElement.

Returns

T

The element that matches the content selector.

Default

this.querySelector("[data-content]");

getTrigger()

getTrigger<T>(): NodeListOf<T>

Defined in: base/index.ts:61

Type Parameters

• T extends HTMLElement = HTMLElement

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Default

this.querySelectorAll("[data-trigger]");

mount()

mount(): void

Defined in: base/index.ts:168

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.

Returns

void

safeListener()

safeListener<K, T>(type, listener, element, options): void

Defined in: base/index.ts:136

Wrapper around document.body.addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

swapContent(revert): void

Defined in: base/index.ts:93

Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.

triggerListener<T, K>(listener, type, options?): void

Defined in: base/index.ts:153