eleva

Attr Plugin

Version: 1.1.1 Type: Attribute Binding Plugin Bundle Size: ~2.2KB minified Dependencies: Eleva core

The Attr plugin provides intelligent attribute binding for Eleva components, automatically handling ARIA accessibility attributes, data attributes, boolean attributes, and dynamic property detection.

Prerequisites

Before using the Attr Plugin, you should be familiar with:

Getting Started — Basic Eleva setup and your first app
Core Concepts — Signals and template syntax
Components — Component structure and templates

TL;DR - Quick Reference

30-Second Setup

import Eleva from "eleva";
import { Attr } from "eleva/plugins";

const app = new Eleva("App");
app.use(Attr);  // Enable attribute binding

API Cheatsheet

Feature	Syntax	Description
ARIA Attributes	`aria-label="${ctx.label}"`	Accessibility attributes
Data Attributes	`data-id="${ctx.id}"`	Custom data storage
Boolean Attributes	`disabled="${ctx.isDisabled.value}"`	Presence-based attributes
Dynamic Properties	`value="${ctx.inputValue}"`	DOM property binding
Update Method	`app.updateElementAttributes(old, new)`	Manual attribute sync

Context Rule: Inside ${}, access properties via ctx. prefix. Use ${ctx.isLoading.value} in templates with template: (ctx) => \…``.

Configuration Options

Option	Type	Default	Description
`enableAria`	`boolean`	`true`	Enable ARIA attribute handling
`enableData`	`boolean`	`true`	Enable data-* attribute handling
`enableBoolean`	`boolean`	`true`	Enable boolean attribute handling
`enableDynamic`	`boolean`	`true`	Enable dynamic property detection

Documentation

Section	Description
Features	ARIA, data, boolean, and dynamic attributes
Usage Patterns	Forms, accordion, tabs, table, modal
API Reference	Complete API, troubleshooting, best practices

Features

Feature	Description
ARIA Handling	Automatic accessibility attribute management
Data Attributes	Custom data storage on elements
Boolean Attributes	Intelligent truthy/falsy handling
Dynamic Properties	DOM property synchronization
Zero Config	Works out of the box with sensible defaults
Selective Enable	Configure which features to enable
Manual API	`updateElementAttributes()` for advanced use cases

Installation

Via Package Manager

# npm
npm install eleva

# yarn
yarn add eleva

# pnpm
pnpm add eleva

# bun
bun add eleva

Via CDN

<!-- Option 1: Bundled plugins -->
<script src="https://cdn.jsdelivr.net/npm/eleva"></script>
<script src="https://cdn.jsdelivr.net/npm/eleva/dist/eleva-plugins.umd.min.js"></script>
<script>
  const app = new Eleva("MyApp");
  app.use(ElevaPlugins.Attr);
</script>

<!-- Option 2: Individual plugin -->
<script src="https://cdn.jsdelivr.net/npm/eleva"></script>
<script src="https://cdn.jsdelivr.net/npm/eleva/dist/plugins/attr.umd.min.js"></script>
<script>
  const app = new Eleva("MyApp");
  app.use(ElevaAttr);
</script>

Getting Started

Basic Setup

import Eleva from "eleva";
import { Attr } from "eleva/plugins";

// Create app instance
const app = new Eleva("MyApp");

// Install Attr plugin with default options
app.use(Attr);

// Or with custom configuration
app.use(Attr, {
  enableAria: true,      // Handle ARIA attributes
  enableData: true,      // Handle data-* attributes
  enableBoolean: true,   // Handle boolean attributes
  enableDynamic: true    // Handle dynamic properties
});

First Component with Attributes

app.component("AccessibleButton", {
  setup({ signal }) {
    const isLoading = signal(false);
    const buttonLabel = signal("Submit Form");

    const handleClick = () => {
      isLoading.value = true;
      // Simulate async operation
      setTimeout(() => {
        isLoading.value = false;
      }, 2000);
    };

    return { isLoading, buttonLabel, handleClick };
  },
  template: (ctx) => `
    <button
      aria-label="${ctx.buttonLabel.value}"
      aria-busy="${ctx.isLoading.value}"
      disabled="${ctx.isLoading.value}"
      @click="handleClick"
    >
      ${ctx.isLoading.value ? 'Loading...' : ctx.buttonLabel.value}
    </button>
  `
});

app.mount(document.getElementById("app"), "AccessibleButton");

Configuration

Plugin Options

app.use(Attr, {
  enableAria: true,      // Enable ARIA attribute handling
  enableData: true,      // Enable data-* attribute handling
  enableBoolean: true,   // Enable boolean attribute handling
  enableDynamic: true    // Enable dynamic property detection
});

Selective Feature Enabling

// Only ARIA attributes (accessibility-focused)
app.use(Attr, {
  enableAria: true,
  enableData: false,
  enableBoolean: false,
  enableDynamic: false
});

// Only data attributes (data storage)
app.use(Attr, {
  enableAria: false,
  enableData: true,
  enableBoolean: false,
  enableDynamic: false
});

// Form handling (boolean + dynamic)
app.use(Attr, {
  enableAria: false,
  enableData: false,
  enableBoolean: true,
  enableDynamic: true
});

Data Flow

┌─────────────────────────────────────────────────────────────────┐
│                        Attr Plugin                               │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   Signal Change                                                  │
│        │                                                         │
│        ▼                                                         │
│   ┌─────────────────────────────────────────────────────┐       │
│   │              Attribute Detection                      │       │
│   └─────────────────────────────────────────────────────┘       │
│        │                                                         │
│        ├─── aria-* ──► ARIA Handler ──► setAttribute()          │
│        │                                                         │
│        ├─── data-* ──► Data Handler ──► dataset[key]            │
│        │                                                         │
│        ├─── boolean ─► Boolean Handler ─► add/removeAttribute() │
│        │   (disabled, checked, etc.)                             │
│        │                                                         │
│        └─── dynamic ─► Property Handler ──► element[property]   │
│            (value, src, etc.)                                    │
│                                                                  │
│   ┌─────────────────────────────────────────────────────┐       │
│   │              DOM Updated                              │       │
│   └─────────────────────────────────────────────────────┘       │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

When to Use

Building accessible applications - Use ARIA features
Storing element metadata - Use data attributes
Form handling - Use boolean and dynamic properties
Component libraries - Use all features for flexibility

Next Steps

Features - Learn about ARIA, data, boolean, and dynamic attributes
Usage Patterns - Real-world examples
API Reference - Complete API and troubleshooting

Form Patterns - Input binding and validation examples
Conditional Rendering - Show/hide and accessibility
Router Plugin - Combine with routing for accessible navigation
Store Plugin - Manage attribute state globally

← Back to Plugins

Next: Features →

This site is open source. Improve this page.