Lit Pages with Server-rendered Shells

Serve an HTML shell from Hono and hydrate per-page Lit components via module scripts.

Routing Pattern

• /news -> <news-page> + /frontend/pages/news-page.js
• /video/:id -> <video-page videoId="...">
• /article/:id -> <article-page articleId="...">

Template Helper

Use a shared template builder for all pages:

renderPageTemplate({ title, description, componentName, scriptPath })
renderPageTemplateWithProps({ ..., props: { videoId } })

Why This Works Well

• One server route per page for SEO/meta control.
• Component-level rendering and state stays in Lit.
• Clean split: shell from backend, logic from frontend modules.

Safety Note

Escape route props before injecting as HTML attributes to prevent XSS.