drab - prefetch

import "drab/prefetch/define";

<drab-prefetch>
	<a data-trigger href="/">Hover to prefetch</a>
</drab-prefetch>

<!-- Wrap anchors and use a `trigger` selector. -->
<div>
	<drab-prefetch trigger="a[href^='/']" strategy="visible" prerender>
		<a href="/">Prerender when visible</a>
	</drab-prefetch>
</div>

<!-- Prefetch a `url` without providing a trigger. -->
<drab-prefetch url="/" class="hidden"></drab-prefetch>

Overview

Defined in: prefetch/index.ts:79

The Prefetch element can prefetch a url, or enhance the HTMLAnchorElement by loading the HTML for a page before it is navigated to. This element speeds up the navigation for multi-page applications (MPAs).

If you are using a framework that already has a prefetch feature or uses a client side router, it is best to use the framework’s feature instead of this element to ensure prefetching is working in accordance with the router.

strategy

Set the strategy attribute to specify the when the prefetch will take place.

"hover" - (default) After mouseover, focus, or touchstart for > 200ms
"visible" - Uses an intersection observer to prefetch when the anchor is within the viewport.
"load" - Immediately prefetches when the element is loaded, use carefully.

prerender

Use the prerender attribute to use the Speculation Rules API when supported to prerender on the client. This allows you to run client side JavaScript in advance instead of only fetching the HTML.

Browsers that do not support will still use <link rel="prefetch"> instead.

Speculation Rules Reference

url

Add a url attribute to immediately prefetch a url without having to provide (or in addition to) trigger anchor elements.

This element can be deprecated once the Speculation Rules API is supported across browsers. The API will be able to prefetch assets in a similar way with the source: "document" and eagerness features, and will work without JavaScript.

Extends

Base

Constructors

new Prefetch()

new Prefetch(): Prefetch

Defined in: prefetch/index.ts:82

Returns

Prefetch

Overrides

Base.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

Inherited from

Base.event

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

Returns

void

Inherited from

Base.announce

appendTag()

appendTag(options): void

Defined in: prefetch/index.ts:106

Appends <link rel="prefetch"> or <script type="speculationrules"> to the head of the document.

Parameters

options

Configuration options.

prerender

boolean

Uses the Speculation Rules API when supported to prerender on the client.

url

string

url to prefetch.

Returns

void

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

Returns

void

Inherited from

Base.connectedCallback

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

Inherited from

Base.destroy

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

Returns

void

Inherited from

Base.disconnectedCallback

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]");

Inherited from

Base.getContent

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]");

Inherited from

Base.getTrigger

mount()

mount(): void

Defined in: prefetch/index.ts:241

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.