Syntax

variable

CSS variables defined specific values to be reused throughout a document.

Overview

ClassDeclarations
$custom:`value`--custom: `value`;

Stylize a shadow DOM

Let's say this's your custom element and its tree:

<test-element>    ▼ #shadow-root (open)        <button part="button"></button></test-element>

and the element contains an encapsulated style like this:

:host {    --button-bg: red;}[part=button] {    background: var(--button-bg);}

Elements in the shadow DOM cannot be selected via descendant selectors, but you can:

<test-element class="$button-bg:red $button-bg:pink@sm">    ▼ #shadow-root (open)        <button part="button"></button></test-element>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="$size:2.5rem:hover $size:2.5rem@sm $size:2.5rem@dark $size:2.5rem@print">…</div>

  • Master UI


© 2025 Aoyue Design LLC.MIT License
Trademark Policy