Best of Web ComponentsJuly 2025

  1. 1
    Video
    Avatar of awesome-codingAwesome·44w

    Microfrontends the right way

    Microfrontends promise independent deployments and team autonomy but often introduce unnecessary complexity. While the concept addresses organizational challenges more than technical ones, several implementation approaches exist: iframes provide hard isolation but poor UX, web components offer framework-agnostic custom elements with shadow DOM, single-spa adds orchestration layers that create distributed system complexity, and Webpack's module federation enables runtime code sharing. Modern browsers support native ES modules for cross-domain imports, potentially reducing bundler dependency. Astro's island architecture emerges as a practical solution, loading UI components only when needed.

  2. 2
    Article
    Avatar of tailwindcsstailwindcss·43w

    Vanilla JavaScript support for Tailwind Plus

    Tailwind Plus now includes vanilla JavaScript support through @tailwindplus/elements, a library of headless custom elements that make interactive UI components like dropdowns, dialogs, and command palettes work without requiring React or Vue. The library leverages modern web platform features like custom elements, the popover attribute, and native dialog elements to provide accessible, framework-agnostic components that can be styled with utility classes and work across different web frameworks.

  3. 3
    Article
    Avatar of ffocusFrontend Focus·43w

    Frontend Focus Issue 703: July 30, 2025

    A curated collection of frontend development articles covering new CSS features like carousel specs, masonry layouts, and scroll-spy functionality. Highlights include MDN's 20th anniversary celebration, practical React and Next.js patterns, WebAssembly DOM integration challenges, and Apple's upcoming Liquid Glass design aesthetic. Also features tools and resources including a world clock slider component and full-stack development guides.

  4. 4
    Article
    Avatar of lobstersLobsters·46w

    Our Fullstack Architecture: Eta, HTMX, and Lit

    A fullstack architecture combining Eta templating for server-side rendering, HTMX for dynamic interactions, and Lit Web Components for complex client-side logic. This approach delivers fast initial page loads with minimal JavaScript bundles (151KB vs 635KB-2.6MB for React apps) while maintaining rich interactivity. The stack uses server-rendered HTML as the foundation, HTMX for 90% of user interactions, and Lit components as 'islands of interactivity' for stateful client-side features like pagination. View Transitions API provides smooth animations between content updates.