Betting on WebC
WebC is a new tool by Eleventy that is one of the most exciting developments in a long time.
WebC as a standalone tool generates markup for custom elements and Web Components, which unlocks server-rendering for Web Components and brings many quality-of-life features while following web standards.
As someone who most enjoys working in good old HTML, CSS, and vanilla JS, this is a dream. I've used plenty of frontend frameworks throughout my career, but I've always been frustrated by the complexity, bloat, and damage to the user experience they cause. WebC has the potential to become my go-to approach for building websites.
WebC as a plugin for Eleventy allows for single-file components and tons of new templating and rendering possibilities. It can be used for layouts, pages, and components, meaning Eleventy sites can now be built entirely with WebC without other templating languages such as Nunjucks or Liquid.
In fact, I recently rebuilt this website using WebC instead of Nunjucks, and the authoring experience was so empowering, simple, and fun. I'm using WebC for layouts (including nested layouts), pages, and components that have fully replaced Nunjucks partials/includes.
Enhancing Web Components
Web Components have a strong future, but the main arguments against them have been server-side rendering and the ergonomics. WebC solves this, allowing for progressive enhancement, while also providing rendering flexibility, simple CSS scoping, critical CSS and JS bundling, and more.
Probably my favorite benefit of WebC with Eleventy is the default behavior of simply rendering an HTML-only partial. You simply write markup in a
.webc file, and the custom element tag will be replaced with the markup when rendered. This is the main use case for HTML templating, and keeps the DOM clean and simple. I'll dig into and compare all the rendering options WebC offers in a future post, as there are so many useful options available.
WebC unlocks a lot of possibilities for static sites using Eleventy and I'm interested in what's now possible for even more interaction-heavy experiences. I have an ambitious personal project in the works, so I'm going to take things as far as I can with WebC and Eleventy, sharing my learnings and ideas along the way.
Because WebC addresses the limitations of Web Components, I'm optimistic that it can be used to build robust web apps and can gain strong adoption in the community.
I don't care about tech trends, but it'd be great to have a project that's committed web standards and progressive enhancement grow in use to improve the web for everyone.
Learn more about WebC
- WebC Eleventy documentation
- Interactive Progressively-enhanced Web Components with WebC (Eleventy YouTube)
- Crash Course in Eleventy’s new WebC Plugin (Eleventy YouTube)
- 11ty & WebC. This site of useful recipes taught me a lot about how WebC works and all the different rendering options it offers.