04 / Anatomy

Parts and states, never classes

A component exposes a stable set of named parts and declares its state on the DOM. Skins target those attributes. Because the selector surface is data attributes rather than class names, a skin written against version 1 keeps working when internals change, and the same anatomy renders identically from React, Vue, or a server-rendered template.

Anatomy — no appearance

<div data-se="dialog" data-state="open">
  <div data-part="overlay"></div>
  <div data-part="content" role="dialog">
    <h2 data-part="title"></h2>
    <p  data-part="description"></p>
    <div data-part="body"></div>
    <div data-part="footer"></div>
    <button data-part="close"></button>
  </div>
</div>

Skin — only tokens

[data-se="dialog"] [data-part="content"] {
  background: var(--se-surface);
  border-radius: var(--se-radius-lg);
  padding: var(--se-space-6);
  box-shadow: var(--se-shadow-overlay);
  max-inline-size: min(92vi, 34rem);
}

[data-se="dialog"][data-state="closed"] {
  display: none;
}

The same button, three skins

studio-edit.css

studio-edit-dark.css

high-contrast.css

Identical markup, identical behaviour, identical accessible name. Three stylesheets.