Observer options

Observe visibility, DOM mutations, or size when an interaction needs information from the browser. Configure only the observers you use on that element.

Configure an observer

Observer directives support b-options, a synchronous object keyed by their attribute name. Base-name options apply first, then full-name options, then boolean dot modifiers. Options are read at hydration, not reactively retargeted. This is an observer-specific API, not a restoration of general legacy options for model/event/mask directives.

<div b-options="{ 'b-on-enter': {
       root: '#scroller', rootMargin: '20px', threshold: [0, 0.5, 1]
     } }"
     b-on-enter.once.debounce="console.log($entry)"></div>

<div b-options="{ 'b-on-attrs': {
       target: '#observed', subtree: false,
       attributeFilter: ['data-theme'], attributeOldValue: true
     } }"
     b-on-attrs="console.log($mutations)"></div>

<div b-options="{ 'b-on-resize': { box: 'border-box', debounce: 250 } }"
     b-on-resize.document="console.log($size, $entry)"></div>

Visibility: intersection options

Option	Meaning
root	Element/Document reference, selector, or null for the viewport (default).
rootMargin	Native CSS length/percentage syntax.
threshold	Number or array between 0 and 1.
.once	Stop after the first delivered matching callback.

Enter/exit follow isIntersecting. Thresholds control native notification boundaries, not an additional percentage filter.

DOM changes: mutation options

Option	Meaning
target	Element/Document/Text reference or selector; defaults to the directive element.
subtree	Defaults to true for existing v4 behavior; set false for direct-only observation. .subtree forces true.
attributeFilter, attributeOldValue	Attribute-observer options; the old-value flag defaults to false.
characterDataOldValue	Text-observer option; defaults to false.

Added/removed observers filter childList records. Text observers watch characterData, not arbitrary textContent replacements.

Size changes: resize options

Option or binding	Meaning
.document or document: true	Observe the owner document’s documentElement.
box	content-box (default), border-box, or device-pixel-content-box; passed to observe.
$size.width, $size.height	The selected measurement, accounting for vertical writing modes. Device-pixel units are physical pixels.
$entry	Native resize entry.

Missing nondefault box measurements report an error instead of silently supplying a different box.

Debounce and observer cleanup

Debounce setting	Delay
.debounce or debounce: true	100ms.
Numeric debounce	A non-negative delay.
False or absent	Run immediately.

A dot modifier overrides numeric configuration. Mutation debounce accumulates every matching record; intersection/resize use the latest matching entry. Disposal disconnects observers and cancels pending callbacks.

Selectors must resolve when hydrated. Invalid options throw explicitly. Intersection/ResizeObserver require native browser support or an application polyfill; native constructor validation governs CSS margins and platform support.