Attr Plugin
| Version: 1.0.0 |
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.
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}" |
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
<!-- Core + All Plugins -->
<script src="https://cdn.jsdelivr.net/npm/eleva/dist/eleva-plugins.umd.min.js"></script>
<!-- Attr Plugin Only -->
<script src="https://cdn.jsdelivr.net/npm/eleva/dist/plugins/attr.umd.min.js"></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