You can make up HTML tags

Original Article ↗ Hacker News Discussion ↗

Browser behavior & standards

  • Unknown HTML tags are allowed; by default they behave like inline elements similar to <span>.
  • Tags without a dash become HTMLUnknownElement; names with a dash are treated as HTMLElement and reserved for custom elements, never future native tags.
  • This enables styling and selection via CSS and JS (querySelector, :not(:defined), etc.) even before any JavaScript-defined custom element is registered.
  • Older IE needed shims/HTML5 shiv to recognize new/custom tags, but modern browsers handle them natively.

Benefits cited

  • Readability: custom tags can reduce “div soup” and make nested structures easier to visually parse and search in editors.
  • Organization: some use them to represent components (<card>, <x-hero>), layout contexts, or domain concepts (<invoice>, <toolbar>).
  • Interop: when used as web components, a single custom element can be consumed from different frameworks (React, Vue, Angular, etc.).
  • Automatic hydration: custom elements’ lifecycle (connectedCallback) lets behavior reliably attach to elements added later to the DOM.

Concerns & drawbacks

  • Semantics: many argue classes on standard elements (<article>, <header>, <blockquote>, etc.) are preferable; custom tags add no built‑in meaning.
  • Accessibility: unless ARIA roles/attributes are added, custom tags act like generic divs/spans for screen readers and assistive tech.
  • Confusion: unfamiliar tags can blur the line between native and custom behavior; reliance on many custom names creates cognitive load.
  • Maintainability: overuse can hurt readability, especially deeply nested or over‑specific names; naming debates are a practical friction.

Web components, Lit, and frameworks

  • Several comments connect this to web components and libraries like Lit and Shoelace, praising interop but noting verbosity and Shadow DOM complexity.
  • Styling inside Shadow DOM, especially with utility frameworks like Tailwind, is seen as awkward; some switch components to light DOM or share styles via adopted stylesheets.
  • There’s disagreement over whether SPAs and frameworks like React are still overused versus a resurgence of SSR plus light JS/custom elements.

CSS techniques & use cases

  • Common patterns: setting defaults via :where(:not(:defined)) { display: block }, using nth-child(... of .class), @media (scripting) for JS-on/JS-off behavior.
  • Concrete uses include custom syntax highlighting tags, <yes-script> for JS-only content, pseudo-<blink> recreations, and design systems built entirely from custom elements.