eleventy-plugin-webc is the official Eleventy plugin that adds WebC, the single-file web component format, as a first-class template language for building component-driven static sites.
What is eleventy-plugin-webc?
eleventy-plugin-webc is an open-source plugin for the Eleventy static site generator that brings WebC, a single-file web component format, into Eleventy projects. It takes .webc files as input and expands any HTML element — including custom elements — into server-rendered HTML output, following defined conventions from web standards. The plugin is published on npm as @11ty/eleventy-plugin-webc and is maintained by the 11ty team behind Eleventy. Because it operates on standard HTML, WebC components created with this plugin work with server-side rendering without duplicating author-written markup.
Key Features
- First-class components — WebC gives Eleventy real component support, letting you expand any HTML element or custom element into rendered HTML using web-standard conventions.
- Progressive Enhancement friendly — Components are designed to enhance progressively, with official tutorials covering interactive component patterns.
- Incremental builds — When used with Eleventy's --incremental flag, the plugin supports first-class incremental builds for page templates, components, and Eleventy layouts.
- Streaming friendly — WebC output can stream, making it suitable for edge rendering scenarios.
- Scoped CSS — Component CSS can be easily scoped using built-in conventions or your own scoping utility.
- No-import components — Define global or per-page no-import components to avoid repetitive import statements.
- Bundler mode — Roll up the CSS and JS actually used by WebC components on a page into page-specific bundles, providing critical CSS/JS without loading unused code.
- is-land integration — Works with the is-land plugin for web component hydration.
Who is it for?
- Eleventy developers building component-driven static sites who want to reuse UI components across pages without duplicating markup.
- Web component authors who want to author single-file components that work with server-side rendering and progressive enhancement.
- Static site maintainers needing per-page CSS/JS bundling for performance without over-fetching assets.
Use cases
- Component libraries: Create reusable custom elements in .webc files and consume them across an Eleventy site.
- Performance optimization: Use bundler mode to roll up only the CSS and JS used on each page for critical asset delivery.
- Hybrid templating: Combine WebC with Liquid, markdown, or Nunjucks inside a single component for flexible content structures.
FAQ
Is eleventy-plugin-webc free?
Yes, it is open-source software maintained by the 11ty team and available on npm under the @11ty scope.
Where can I find the documentation?
The documentation has moved to 11ty.dev at https://www.11ty.dev/docs/languages/webc/. The repository also links to a crash course and interactive components tutorial on YouTube.
Does eleventy-plugin-webc support Shadow DOM?
Yes. WebC is Shadow DOM friendly and works with or without Shadow DOM, so you can choose your preferred component encapsulation approach.
Can I use my existing Eleventy templates inside WebC?
Yes. You can render any existing Eleventy template syntax, including Liquid, markdown, and Nunjucks, inside WebC files for more complex templating needs.
