# Worked examples
Three real files from this package, annotated. Copy the closest one and adapt rather than starting from a
blank file.
## 1. Minimal attribute-driven custom element — `src/customElements/elements/mmo-progress.jhs`
Single observed attribute (`value`), no loops/conditionals, a getter/setter that coerces + validates the raw
attribute and updates the shadow DOM directly for a part that isn't worth making fully reactive.
```html
```
**Notes:** `` inside `#text` lets callers write `Uploading…`
and have the light-DOM text land there. `#content`/`#percent` are plain static markup driven imperatively by
the setter via `queryShadow` — a legitimate pattern for anything needing more control than declarative `{path}`
binding.
## 2. Element with `` + `/` — `src/customElements/inputs/mmo-radio.jhs` (excerpt)
```html
```
**Notes:**
- `` iterates a Map of objects; each item's `{label}`/`{icon}`/`{class}` are
relative to that item.
- `{=$key}` — `$key` is the default loop key variable, wrapped in `{=...}` because it's a JS variable
reference, not a Map path.
- `onkeydown="$this.onKeyDown(event)"` — `$this` resolves to `view.getScope()`, i.e. the `Radio` element
instance.
- `......` chooses between an `` and a plain `` per item.
- `static get ViewDefault() {return {required: false};}` sets an initial value in `this.view.content` before
`defaultAttributes` processing runs — distinct from `defaultAttributes` (compiler-generated from the root
tag, drives which attributes are *observed*).
- Two-way `value`: the root tag declares `value` bare (observed); the class's `get/set value` fully owns
coercion and DOM sync.
## 3. Standalone view (no shadow DOM, no custom tag) — `src/customElements/views/Issue.jhs`
```html
```
**Notes:**
- No `