html★ attributes cascade down the DOM tree like CSS properties. Set once, inherit everywhere.
The Key Insight
Instead of repeating attributes on every element:
<!-- Without cascade (verbose) --><nav> <a href="/" data-target="#main" data-push>Home</a> <a href="/users" data-target="#main" data-push>Users</a> <a href="/settings" data-target="#main" data-push>Settings</a></nav>
Set them once on the parent:
<!-- With cascade (clean) --><nav data-target="#main" data-push> <a href="/">Home</a> <a href="/users">Users</a> <a href="/settings">Settings</a></nav>
How It Works
When html★ needs an attribute value, it walks up the DOM tree:
- Check the element itself
- Check each parent element up to
<body> - Check the
<html>element - Check
<meta>tags in the head - Use built-in defaults
The first value found wins (nearest ancestor).
Inheritance Example
<html data-swap="inner"> <!-- Global default --> <body data-target="#main"> <!-- All descendants target #main --> <nav data-push> <!-- Nav links push history --> <a href="/">Home</a> <!-- -> #main, pushes --> <a href="/users">Users</a> <!-- -> #main, pushes --> <a href="/login" data-target="#modal"> <!-- -> #modal (override) --> Login </a> </nav> <aside data-target="#sidebar"> <!-- Override for this section --> <a href="/help">Help</a> <!-- -> #sidebar --> </aside> </body></html>
Inheritable Attributes
Not all attributes inherit. Inheritable attributes cascade down from ancestors, while non-inheritable attributes are only read from the element itself.
Inheritance Reference
The following table lists every attribute recognized by the cascade system and whether it inherits. Inheritable attributes are listed first, followed by non-inheritable ones.
| Attribute | Inherits |
|---|---|
data-target | ✓ |
data-swap | ✓ |
data-select | ✓ |
data-push | ✓ |
data-replace | ✓ |
data-confirm | ✓ |
data-transitions | ✓ |
data-prefetch | ✓ |
data-cache | ✓ |
data-cache-storage | ✓ |
data-send-headers | ✓ |
data-instant | ✓ |
data-error-target | ✓ |
data-loading-target | ✓ |
data-loading-class | ✓ |
data-queue | ✓ |
data-trigger | ✗ |
data-persist | ✗ |
data-persist-scope | ✗ |
data-href | ✗ |
data-method | ✗ |
data-headers | ✗ |
data-include | ✗ |
data-sse | ✗ |
data-poll | ✗ |
data-oob | ✗ |
data-disable | ✗ |
Opting Out
Use an empty string to break inheritance:
<nav data-target="#main" data-push> <a href="/dashboard">Dashboard</a> <!-- AJAX --> <a href="/logout" data-target="">Logout</a> <!-- Full page --></nav>
The data-target="" explicitly opts out, making that link behave like a normal link.
Configuration Priority
From lowest to highest priority:
- Built-in defaults (
swap: "inner", etc.) <meta name="htmlstar:*">tags<html data-*>attributes<body data-*>attributes- Ancestor
data-*(nearest wins) - Element's own
data-*
Tip: Set sensible defaults on
<html>or<body>, then override only where needed. This keeps your HTML clean and consistent.