WildflowerJS Logo WildflowerJS

Data Attributes

WildflowerJS uses standard HTML data-* attributes for all framework functionality. There is no custom syntax, build step, or new language to learn. This page is a quick reference for every attribute the framework recognizes.

Prefix Support: Every attribute below also works with a data-wf-* prefix (e.g., data-wf-bind, data-wf-action). Use data-wf-* exclusively when you need to avoid conflicts with other libraries. See Configuration for details.

Core

Attribute Description Guide
data-component Define a component root element Components
data-action Bind events to component methods Event Handling
data-external Preserve element during parent HTML updates API Reference
data-cloak Hide element until framework initializes (pair with [data-cloak] { display: none !important; } in CSS) n/a
data-debug Enables debug logging for the component. Shows state changes, binding updates, and lifecycle events in the console. n/a

Data Binding

Attribute Description Guide
data-bind Text content binding Content Binding
data-bind-html Raw HTML binding Content Binding
data-bind-class Dynamic CSS class binding Style Binding
data-bind-style Dynamic inline style binding Style Binding
data-bind-attr Dynamic HTML attribute binding (object expression) Attribute Binding

Forms

Attribute Description Guide
data-model Two-way form input binding Form Handling
data-model-lazy Update on blur instead of input Form Handling
data-model-event Custom event for model sync (for web components) Form Handling
data-validate Form validation rules Form Handling
data-validate-message Custom error message for validation failure Form Handling
data-validate-on Specifies when validation runs on a form input (e.g., blur, change, input). Default is on submit. Form Handling
data-error-for Display element for a field's validation error (matches model path) Form Handling
data-model-trim Trim whitespace from bound value Form Handling
data-model-number Coerce bound value to a number Form Handling

Conditionals & Lists

Attribute Description Guide
data-show Conditional display (CSS display: none) Conditional Rendering
data-render Conditional render (DOM insertion/removal) Conditional Rendering
data-list List rendering from array state Lists & Iteration
data-key Unique key for efficient list reconciliation Lists & Iteration

Entity Pools

Attribute Description Guide
data-pool High-performance entity pool container (plain objects, rAF-batched updates) Entity Pools
data-pool-fps Throttle pool flush rate (value in target FPS, e.g. "30") Pool API
data-pool-cull Spatial culling with viewport padding in px (hides off-screen entities) Pool API
data-pool-sort Z-index depth sort by entity property (e.g. "y" or "depth:desc") Pool API
data-pool-cull-props Comma-separated list of entity properties used for culling bounds (e.g., x,y,w,h). Entities outside the cull bounds are hidden with display: none. Pool API
data-pool-static Boolean (no value): makes the entire pool static, skipping rAF flush; items render on add()/update() only. With value (e.g. "isLocked"): per-entity opt-out from flush based on entity property. Pool API

Components & Templates

Attribute Description Guide
data-props Component props (JSON format) Props
data-prop-* Individual component prop Props
data-slot Named slot content Slots
data-slot-container Mark a content area in component layout for slot injection Slots
data-item-template Define a named template for descendant components to use Configurable Templates
data-use-template Reference a named template from an ancestor Configurable Templates
data-with Bind a configurable template to a single state object Configurable Templates
data-template-fallback Fallback template when the named template is not found Configurable Templates
data-template-key Select template variant by data property Dynamic Templates
data-type Template variant type identifier (used with data-template-key) Dynamic Templates

Event Modifiers

These attributes modify the behavior of data-action handlers. See Event Handling for details.

Attribute Description
data-event-prevent Call preventDefault()
data-event-stop Call stopPropagation()
data-event-once Execute handler only once
data-event-self Only fire if event target is the element itself
data-event-outside Fire when clicking outside the element
data-event-capture Use capture phase
data-event-passive Mark as passive listener
data-event-debounce Debounce handler (value in ms, default 300)
data-event-throttle Throttle handler (value in ms, default 300)
data-event-delay Delay handler execution (value in ms)
data-event-if Only fire handler when a state expression is truthy
data-event-key-* Key modifiers (ctrl, alt, shift, meta, enter, etc.)

Advanced

Attribute Description Guide
data-portal Render content at a different DOM location Portals
data-transition CSS transition for show/render changes Transitions
data-error-fallback Fallback content for error boundaries Error Boundaries
data-ssr Mark component as server-side rendered SSR
data-ssr-state JSON script block containing server-rendered state for SSR hydration. Parsed during component initialization to restore server state. SSR
data-storage-key localStorage key for component state persistence State Management
data-auto-save Auto-save state to localStorage on every change State Management
data-no-router Skip router handling on a link (use native navigation) Route Management

For detailed per-attribute documentation with full examples, see the HTML Attributes API Reference.

Previous Dynamic Templates
Next Content Binding