IdeaWell

Project ideas from Hacker News discussions.

You can make up HTML tags

Original Article

Hacker News Discussion

📝 Discussion Summary (Click to expand)

1. Custom Tags Enhance Readability Over "Div Soup"

Users praise made-up tags (especially hyphenated ones) for clearer nesting and editing without JS.
"Make more sense?" (ycombiredd) on visual clarity in vim.
"You are allowed to just make up elements as long as their names contain a hyphen... to make writing HTML and CSS nicer and avoid meaningless div-soup" (zahlman quoting lyra.horse).

2. Custom Elements as Framework-Agnostic Alternative

Enthusiasm for Web Components/Lit for interop across React/Vue/etc., preferring them over SPAs.
"I think it's a beautiful, elegant solution and I'm still a little bit bitter that React became as big as it was" (lofties).
"What makes custom elements good is interop. I can use them in react, Vue, angular, svelte... This is a unique advantage to WCs" (WickyNilliams).

3. Concerns Over Semantics, Accessibility, and Standards

Critics favor classes/native tags for semantics, ARIA, and avoiding confusion.
"But there's no real reason to, and it just adds confusion around which elements are semantic... vs which are custom" (crazygringo).
"isn't semantic and breaks accessibility features. If you find yourself writing layouts like this you're probably ignoring...

🚀 Project Ideas

Custom Elements CSS Reset

Summary

  • A drop-in CSS library that applies sensible default styles to all unknown/custom elements (e.g., display: block for non-hyphenated, proper inheritance), handles UA stylesheet gaps like [hidden], and provides :not(:defined) utilities for styling.
  • Core value: Eliminates "span-like" defaults and forgotten display rules, making "made-up tags" instantly usable without boilerplate.

Details

Key Value
Target Audience Frontend devs using plain HTML or web components for layout/readability
Core Feature Single import with :where(:not(:defined)) { display: block; } + semantic polyfills
Tech Stack Pure CSS; optional PostCSS plugin for autoprefixing
Difficulty Low
Monetization Hobby

Notes

  • "You have to set the display property on these Custom Elements yourself (You will forget this 20 times...)" – dannye; "the comments here informing us they default to behaving like ... biggest disappointment" – nektro.
  • HN would love the "set it and forget it" utility; high shareability as a boilerplate enhancer.

Tailwind Web Components Bridge

Summary

  • A Tailwind CSS plugin + Lit mixin that auto-injects Tailwind layers into shadow DOM (or light DOM opt-in), supports adopted stylesheets for sharing, and theme inheritance without per-component boilerplate.
  • Core value: Makes Tailwind "just work" in Lit/web components across shadow/light DOM, solving styling modularity pains.

Details

Key Value
Target Audience Lit/web component authors using Tailwind in multi-framework design systems
Core Feature Plugin scans & constructs shared adopted stylesheets; mixin for renderRoot opt-in
Tech Stack Tailwind plugin API + Lit (TS/JS); Vite/Rollup integration
Difficulty Medium
Monetization Revenue-ready: Freemium (core free, pro themes $9/mo)

Notes

  • "hoops you have to jump through to style elements... include that in every single component... not so modular" – g0wda; "complexity of using shadow and light DOM together" – sleazebreeze.
  • Sparks design system discussions; practical for teams mixing React/Angular/Lit.

Semantic Tag Suggester

Summary

  • VS Code extension that analyzes HTML, suggests native semantic tags over div-soup/custom tags (e.g.,
    vs ), lints for accessibility (ARIA hints), and auto-generates custom element definitions with hydration hooks.
  • Core value: Balances custom tag fun/readability with semantics/SEO/a11y, preventing "div soup" or confusion.

Details

Key Value
Target Audience HTML authors (backend devs, component writers) avoiding cognitive load
Core Feature AI-powered suggestions via Tree-sitter; one-click custom element boilerplate
Tech Stack VS Code Extension API + Tree-sitter for HTML parsing + WebComponent polyfill snippets
Difficulty Medium
Monetization Hobby

Notes

  • "avoid the new HTML tags... adds cognitive load" – shevy-java; "using custom element names... creates confusion rather than clarity" – crazygringo; "probably ignoring...
  • Utility for education/practice; HN debates semantics endlessly, perfect for upvotes.

Read Later