Attribute Cascade Spec

Defines the resolution order for element attributes: inline attrs → explicit styles → defaults → compiler inference → theme → built-in.

Per-Component Defaults

The defaults: key in frontmatter sets default attributes for element types. These are applied automatically to every instance of that element type unless overridden by inline attributes.

Image defaults

---
subject: Test
defaults:
  image: { padding: "0" }
---
 
![Hero](https://example.com/img.jpg)
.
<mj-image src="https://example.com/img.jpg" alt="Hero" padding="0px" border="none" />

Button defaults

---
subject: Test
defaults:
  button: { borderRadius: "0" }
---
 
[Click](https://example.com){button}
.
border-radius="0px"

Inline attrs override defaults

---
subject: Test
defaults:
  image: { padding: "0" }
---
 
![Hero](https://example.com/img.jpg){padding="spacious"}
.
padding="40px 32px"

Named Styles

The styles: key defines named attribute bundles applied via {.name}.

Basic style application

---
subject: Test
styles:
  headline: { size: "4xl", weight: "bold", align: "center" }
---
 
THE WAIT IS OVER
{.headline}
.
font-size:36px
.
font-weight:700
.
text-align:center

Style composability

Multiple styles merge left-to-right. Later style wins on conflicts.

---
subject: Test
styles:
  big: { size: "4xl" }
  centered: { align: "center" }
---
 
Hello
{.big .centered}
.
font-size:36px
.
text-align:center

Inline attrs override styles

---
subject: Test
styles:
  headline: { size: "4xl", align: "center" }
---
 
Hello
{.headline size="sm"}
.
font-size:14px
.
text-align:center

Styles above defaults in cascade

---
subject: Test
defaults:
  text: { align: "left" }
styles:
  centered: { align: "center" }
---
 
Hello
{.centered}
.
text-align:center

Compiler Inference

Padding propagation — images in flush sections

Images inside a section with padding="none" inherit zero padding.

---
subject: Test
---
 
::: columns {padding="none"}
::: col
![Hero](https://example.com/img.jpg)
:::
:::
.
padding="0"

Override still works:

---
subject: Test
---
 
::: columns {padding="none"}
::: col
![Hero](https://example.com/img.jpg){padding="spacious"}
:::
:::
.
padding="40px 32px"

Dark background text color

Text in dark background sections defaults to white.

---
subject: Test
---
 
::: columns {bg="#000000"}
::: col
Hello dark world
:::
:::
.
color:#ffffff

Explicit color overrides inference:

---
subject: Test
---
 
::: columns {bg="#000000"}
::: col
Hello dark world
{color="muted"}
:::
:::
.
color:#71717a

Section fusion — {flush}

Adjacent sections with {flush} are wrapped in <mj-wrapper>.

---
subject: Test
---
 
::: columns {bg="#f9f9f9" flush}
::: col
First section
:::
:::
 
::: columns {bg="#000000" flush}
::: col
Second section
:::
:::
.
<mj-wrapper
.
First section
.
Second section