mmo-specimen
One specimen of the design system: a live example, and the html that produced it, in one frame. It is what every page of the Design system section is written with.
Why the example is light dom
The example is the element's own children, shown through a <slot> — so it is
painted by the document's stylesheet, which is the only place .button,
.card or .tag exist. A shadow root sees none of that css, so anything copied
into one would be a second, drifting copy of the design system. The code panel is that same markup read
back from the light dom, dedented and highlighted, which is why the two can never disagree.
Arrangements
layout says how the examples are laid out in the preview: a wrapping row by
default, a column for things that are read one under another, a grid for
variants of the same card, and block for an example that is already a full-width block
— a form, a table, a marketing section.
One
240px minimum.
Two
As many per row as fit.
Three
Never one alone on a line.
Grounds
What looks right on white can vanish on ink. ground starts the specimen on
surface, the page's bg or ink, and the
Folding the html away
code="closed" starts with the source folded, for a specimen whose markup is long or
generated — the
Writing one
Two things it does on the way past, so a page of specimens stays readable: it takes the headings of its
examples out of the page's table of contents — a <h3> inside a card is not a
section of the page — and it drops the anchors that table of contents had given them, so they never
show up in the html you copy.