base
Selected using data attributes by default.
Selected via a CSS selector.
<drab-base>
<button data-trigger class="button button-primary">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
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
Returns
Overrides
HTMLElement.constructor
Source
Properties
#listenerController
private#listenerController:AbortController
To clean up event listeners added to document when the element is removed.
Source
Accessors
event
getevent(): keyofHTMLElementEventMap
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";
setevent(value):void
Parameters
• value: keyof HTMLElementEventMap
Returns
keyof HTMLElementEventMap
Source
Methods
connectedCallback()
connectedCallback():
void
Called when custom element is added to the page.
Returns
void
Source
destroy()
destroy():
void
Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.
Returns
void
Source
disconnectedCallback()
disconnectedCallback():
void
Called when custom element is removed from the page.
Returns
void
Source
getContent()
getContent<
T>(instance):T
Type parameters
• T extends HTMLElement = HTMLElement
Parameters
• instance= undefined
The instance of the desired element, ex: HTMLDialogElement. Defaults to HTMLElement.
Returns
T
The element that matches the content selector.
Default
this.querySelector("[data-content]");
Source
getTrigger()
getTrigger<
T>():NodeListOf<T>
Type parameters
• T extends HTMLElement = HTMLElement
Returns
NodeListOf<T>
All of the elements that match the trigger selector.
Default
this.querySelectorAll("[data-trigger]");
Source
mount()
mount():
void
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
Source
safeListener()
safeListener<
K,T>(type,listener,element,options):void
Wrapper around document.body.addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.
Type parameters
• K extends keyof DocumentEventMap
• T extends Window | Document | HTMLElement = HTMLElement
Parameters
• type: K
• listener
• element: T= undefined
• options: AddEventListenerOptions= {}
Returns
void
Source
swapContent()
swapContent(
revert,delay):void
Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.
Parameters
• revert: boolean= true
Swap back to old content
• delay: number= 800
Wait time before swapping back
Returns
void
Source
triggerListener()
triggerListener<
T,K>(listener,type,options?):void
Type parameters
• T extends HTMLElement
• K extends keyof HTMLElementEventMap
Parameters
• listener
Listener to attach to all of the trigger elements.
• type: K= undefined
• options?: AddEventListenerOptions
Returns
void