Attribute Cascade

html-star attributes cascade like CSS

html★ attributes cascade down the DOM tree like CSS properties. Set once, inherit everywhere.

The Key Insight

Instead of repeating attributes on every element:

Set them once on the parent:

How It Works

When html★ needs an attribute value, it walks up the DOM tree:

  1. Check the element itself
  2. Check each parent element up to <body>
  3. Check the <html> element
  4. Check <meta> tags in the head
  5. Use built-in defaults

The first value found wins (nearest ancestor).

Inheritance Example

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.

AttributeInherits
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:

The data-target="" explicitly opts out, making that link behave like a normal link.

Configuration Priority

From lowest to highest priority:

  1. Built-in defaults (swap: "inner", etc.)
  2. <meta name="htmlstar:*"> tags
  3. <html data-*> attributes
  4. <body data-*> attributes
  5. Ancestor data-* (nearest wins)
  6. Element's own data-*

Tip: Set sensible defaults on <html> or <body>, then override only where needed. This keeps your HTML clean and consistent.