drab - intersect

import "drab/intersect/define";

<drab-intersect threshold="1" class="flex flex-col items-center gap-10">
	<div
		data-trigger
		class="flex min-h-48 items-center justify-center rounded-md border p-6 shadow"
	>
		<p>
			Scroll down, when part of this trigger moves out of the viewport, the
			<code>data-intersect</code>
			attribute will be removed and the color will change to black.
		</p>
	</div>
	<div
		data-content
		class="bg-primary data-intersect:bg-destructive size-48 rounded-full"
	></div>
</drab-intersect>

Overview

Defined in: intersect/index.ts:16

Uses the Intersection Observer API to add a data-intersect attribute to content when the trigger is intersecting.

Use onIntersect and onExit to customize further with JavaScript.

threshold

Specify a threshold between 0 and 1 to determine how much of the trigger should be visible for the intersection to occur.

Constructors

new Intersect()

new Intersect(): Intersect

Defined in: intersect/index.ts:23

Accessors

event

Set Signature

set event(value): void

Defined in: base/index.ts:46

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

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.

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

mount()

mount(): void

Defined in: intersect/index.ts:50

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.