Eleventy Plugin Webc

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.