SemText

Reference · SemText · Disclosure & views

<sem-source>

SemText element

You put ordinary SemText inside. The reader sees the rendered result, then the exact source that produced it. Made for documents that teach the vocabulary.

Lets the reader flip between a section as it renders and the markup behind it. You put ordinary SemText inside. The reader sees the rendered result, then the exact source that produced it. Made for documents that teach the vocabulary. `html` (default) | `source`. The initial mode. Mutable presentation: the toggle rewrites `data-view-as` at runtime (the authored bare attribute is left alone), and extraction ignores it (spec/extraction.md §5c). (optional): a short caption rendered in the chrome. per the global attribute catalog (conventions.md §2) per the global attribute catalog (conventions.md §2)

Example

sem-source.html
source
1 <sem-source id="s-facts" label="Authored vs rendered">
2 <h2>Facts — flashcards</h2>
3 <sem-facts id="s-facts-deck" view-as="flashcards">
4 <sem-fact id="s-facts-parse">
5 <statement>SemText snapshots the section before enhancement</statement>
6 <conclusion>The fence shows the parsed markup, never the file bytes.</conclusion>
7 </sem-fact>
8 </sem-facts>
9 </sem-source>
render

Live render boots with JavaScript — the authored source is alongside.

variant: authored view-as="source" — the section opens in source mode

An authored `view-as="source"` (either spelling) builds the fence at enhance time and starts in source mode; the rendered children stay one click away and the fence is built once, then only shown and hidden. JS-off the children render as ordinary flow — the hide rule is gated on the upgrade marker, so nothing authored-visible is ever hidden without scripts.

variant: authored view-as="source" — the section opens in source mode
sem-source-source-first.html
source
1 <sem-source id="s-source-initial" label="Authored source first" view-as="source">
2 <h3>Facts — flashcards</h3>
3 <sem-facts id="s-source-deck" view-as="list">
4 <sem-fact id="s-source-f1">
5 <statement>The fence text comes from a snapshot of the children</statement>
6 <conclusion>Nodes are cloned before any enhancement runs — never serialised and re-parsed.</conclusion>
7 </sem-fact>
8 </sem-facts>
9 </sem-source>
render

Live render boots with JavaScript — the authored source is alongside.

variant: no label — the chrome without a caption

`label` is optional: the chrome then shows only the Rendered/Source pair. The wrapper still mints nothing — this paragraph extracts as if the wrapper were not there, and with scripts off it is the whole story.

variant: no label — the chrome without a caption
sem-source-no-label.html
source
1 <sem-source id="s-source-plain">
2 <p>Any SemText content may sit inside the wrapper: headings, prose, vocabulary elements. Flip to Source to read exactly this markup as parsed, with the chrome and the fence absent from it.</p>
3 </sem-source>
render

Live render boots with JavaScript — the authored source is alongside.

variant: authoring error — nested wrappers

A `sem-source` must not nest inside another: the snapshot pass skips the inner wrapper with a console warning and the outer wrapper owns the section, so the inner chrome is undefined and must not be relied on. The fence of the outer wrapper contains the inner wrapper's markup verbatim — which is why the inner one must not toggle. Fix the document: one wrapper per section.

variant: authoring error — nested wrappers
sem-source-nested-unsupported.html
source
1 <sem-source id="s-source-outer" label="Outer wrapper">
2 <h3>Facts — flashcards</h3>
3 <sem-source id="s-source-inner" label="Inner wrapper">
4 <p>The inner wrapper has no chrome of its own here: the outer wrapper snapshotted it as content and owns the whole section.</p>
5 </sem-source>
6 </sem-source>
render

Live render boots with JavaScript — the authored source is alongside.

Source: spec/schema/sem-source.md