An autonomous custom element uses a registered hyphenated name and can acquire behavior when its defining script runs.
Make this comfortable
HTML custom elements: preserve useful text before upgrade
Use it for a real task
A receipt status badge starts as readable text inside a custom tag. If the local module loads, it may register the name and enhance the presentation. If the script is delayed or unavailable, the text still communicates the review state. The element name is not a service endpoint, an accessibility role, or a guarantee that a component has been registered.
<main>
<h1>Receipt R-47</h1>
<p>Status: <receipt-status state="held">Held for review</receipt-status></p>
</main>
<script type="module" src="/assets/receipt-status.js"></script>What the markup guarantees
The module must exist and define the element once. Its implementation must preserve the meaningful light-DOM text or provide an equivalent accessible status; HTML alone supplies only the fallback state shown here.
Cost and limits
The unupgraded element is cheap markup. Upgrade code, styles, and per-instance lifecycle work add cost, so measure a page with many badges before moving simple text into a component system.
Common Mistakes
- Do not use a name without a hyphen for an autonomous element.
- Do not clear useful fallback text during upgrade.
- Do not assume registration adds form or keyboard semantics.
Connected lessons
- HTML declarative shadow DOM: parse a component boundary from markup
- HTML module scripts: load one module without ordering every classic script
- HTML status region: announce a changed result without stealing focus
Related: HTML form-associated custom elements: join the form contract deliberately.
Related CSS decisions
- CSS :host: make a component variant an explicit host contract
- CSS ::part(): expose a narrow styling surface across Shadow DOM
Related CSS decisions
html
advanced