realm.css
A small page stylesheet. Load it in the <head>, before anything renders:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">Contents
custom-element,
import-element {
display: none;
}
is-visible,
is-hidden,
repeat-list {
display: contents;
}
:not(:defined) {
visibility: hidden;
}| Rule | Why |
|---|---|
custom-element, import-element { display: none } |
Definitions and import tags never show |
is-visible, is-hidden, repeat-list { display: contents } |
Control-flow tags add no box, so they do not break flex or grid layouts |
:not(:defined) { visibility: hidden } |
Custom elements stay invisible until they are defined, so the page never shows unstyled component content. They keep their space, so layout does not jump |
Added by REALM
Even without realm.css, REALM adds these rules itself.
| Where | Rules |
|---|---|
The page, when start() runs |
custom-element, import-element { display: none !important } and the display: contents rule, as an adopted stylesheet |
| Every component's shadow root (first adopted sheet) | is-visible, is-hidden, repeat-list { display: contents } and :host([hidden]) { display: none !important } |
The :host([hidden]) rule makes the hidden attribute hide a component even when its styles set :host { display: flex }. The :not(:defined) rule is only in realm.css, because it has to apply before any script runs.