mir-frontend-vanillalisted

Make It Right (vanilla JS / no-framework reactivity tier). Plain-DOM footguns that no reactive library is present to hide. Covers event listeners never removed (the #1 leak) and AbortController as the removal mechanism; detached DOM nodes retained by a closure or a module-scope map; Intersection/Mutation/ResizeObservers never disconnected and timers that outlive their element; innerHTML as an XSS sink and the current alternatives (textContent, Element.setHTML + Sanitizer, Trusted Types CSP); manual state/DOM divergence and the idempotent render-from-state discipline; custom-element lifecycle and upgrade timing, shadow DOM style/focus/ARIA consequences; stale-response-overwrites-fresh-response fetch races; and manual focus management (focus after route change, dialog focus traps, aria-live). Chains: mir-frontend → this. TRIGGER when the UI is built with plain DOM APIs and no reactive library — vanilla JS/TypeScript, jQuery-era code, hand-written Web Components, a static site with its own script, a browser-exte
anantbhandarkar/make-it-right · ★ 15 · Web & Frontend · score 81

Install: claude install-skill anantbhandarkar/make-it-right

# /mir-frontend-vanilla · Make It Right (vanilla JS tier) Middle tier. `mir-frontend` decides **what is correct** (any UI); this owns **what plain DOM code gets wrong**. Load order: `mir-frontend` → `mir-frontend-vanilla` → `<framework module, if any>`. With no library there is **no automatic teardown and no render loop**. Every listener, observer, timer, and DOM write is yours to undo, and every state change is yours to reflect. Those two absences produce almost every bug in this file. **Platform baseline, verified 13 Aug 2026** (source: webstatus.dev). Check this before you write a fallback — and before you skip one. | Feature | Baseline | Notes | |---|---|---| | `AbortController` / `addEventListener({signal})` | Widely | The listener-removal mechanism. Use it | | `<dialog>` · `inert` · `:focus-visible` | Widely | Native modal focus trap. Do not hand-roll one | | Form-associated custom elements (`attachInternals`) | Widely (2025-09-27) | Safari 16.4+ | | Popover API | Newly (2025-01-27) | Safari iOS 18.3 closed the gap | | Declarative Shadow DOM · `:state()` | Newly | | | Invoker commands (`command` / `commandfor`) | Newly (2025-12-12) | Safari 26.2 | | **Trusted Types** | **Newly (2026-02-24)** | Firefox 148 shipped it; Safari 26. Enforceable everywhere now | | `setHTMLUnsafe()` / `parseHTMLUnsafe()` | Newly (2025-09-15) | Explicitly *unsafe*; parses declarative shadow roots | | View transitions (same-document) | Newly (2025-10-14) | Firefox 144 | | **`Element.setHTML(