Tags & Aliases
| Role | Tags |
|---|
| Horizontal spacer |
<h-space>...</h-space> | short alias: <h-s>...</h-s> |
| Vertical spacer |
<v-space>...</v-space> | short alias: <v-s>...</v-s> |
Size Input Precedence
- Attribute:
<h-s size="20rem"></h-s>
- Inner text:
<h-s>20rem</h-s>
- CSS var on host:
<h-s style="--h-space-size: var(--gap-xl)"></h-s>
- Default:
1rem
Note: Unitless values are treated as rem (e.g., 2 → 2rem).
Attributes
| Component | Attributes |
|---|
| Common |
size: CSS length for the gap (e.g., 12px, 1.5rem, 6ch, var(--gap)).
|
<h-space> / <h-s> |
block: if present, renders as display:block (default inline-block).thickness: optional visual height to show spacer background/border; default 0 (examples: 2px, 0.25rem).
|
<v-space> / <v-s> |
inline: if present, renders as display:inline-block (default block).
|
CSS Custom Properties (host)
| Name | Purpose |
|---|
--h-space-size |
Width of <h-space>/<h-s>. |
--h-thickness |
Height (visual thickness) of <h-space>/<h-s> (default 0). |
--v-space-size |
Height of <v-space>/<v-s>. |
Styling & Behavior
- Both elements inherit
color, background-color, and font (family/size/weight/style/etc.).
- Horizontal box: width =
size, height = thickness (default 0).
- Vertical box: height =
size; add inline attribute for inline layout.
- Inner text is accepted as input but not rendered (hidden by a shadow
<slot>).
- Changing attributes or inner text at runtime updates the gap (MutationObserver).
- FOUC guard auto-injected with
:not(:defined) hides raw values until upgrade.
JS Properties
el.size (get/set) — mirrors size attribute.el.thickness (get/set) — for <h-space>/<h-s>, mirrors thickness attribute.
Examples
<span>abc</span><h-s>20rem</h-s><span>123</span>
<h-s size="28rem" thickness="2px" style="background-color: orange;"></h-s>
<v-s>1.5rem</v-s> Line 1 <v-s inline>0.75rem</v-s> Line 2
<h-s style="--h-thickness:2px; background-color: rgba(255,165,0,.5)">var(--gap-xl)</h-s>