December 4, 2025
Hyphen drama, Hotwire karma
Building optimistic UI in Rails (and learn custom elements)
Rails devs split: custom tags thrill, Stimulus faithful clutch pearls
TLDR: A Rails guide shows how to use custom HTML tags for instant, optimistic UI updates. The comments erupted into a debate: some love the simple, reusable approach, others say it breaks Rails’ vibe and prefer Stimulus; one even claims you can skip defining them entirely.
A shiny Rails tutorial just dropped, showing how to make your own “special” HTML tags and build an optimistic UI—that’s when your page updates instantly and trusts the server will catch up. It’s simple, fast, and kinda magical. But the comment section? A full-on framework food fight. One fan cheered that it’s a great primer even if you don’t touch Rails, while another marched in with a spicy link to html3000.dev, basically saying, “You don’t even need to define these things, just vibe.” The purists, though, were not vibing. A Rails loyalist insisted raw custom elements feel “too low-level” and clash with Rails’ feel-good simplicity, praising Stimulus (Rails’ tiny JavaScript helper) as the Goldilocks option—lean, not bloated, and blessedly un-verbose. The meme-ification was swift: the “Hyphen Police” showed up to enforce the rule that custom tag names must have a dash, and several joked that “optimistic UI” is “lie first, sync later.” Apple caught strays too—Safari doesn’t support a feature that lets you upgrade built-in buttons, prompting a chorus of “Safari refuses fun.” Verdict: a clever guide sparked a classic vibe war—DIY custom tags vs the comfy Stimulus sweater—and the crowd brought receipts, jokes, and rails-to-riches drama.
Key Points
- •Custom elements allow defining new HTML tags with attached JavaScript behavior and are part of Web Components but usable independently.
- •Hotwire in Rails already employs custom elements, such as <turbo-frame> and <turbo-stream>.
- •Lifecycle hooks (connectedCallback/disconnectedCallback), attribute handling, and attributeChangedCallback with observedAttributes enable reactive behavior.
- •Built-in elements can be extended via the “is” attribute, but Safari lacks support, favoring autonomous custom elements for compatibility.
- •The article compares custom elements to Stimulus and demonstrates building from a simple counter to an optimistic form, with code available on GitHub.