Overview

The eleventy-plugin-webc is a plugin that adds support for WebC, the single file web component format, to the Eleventy static site generator. This plugin allows users to create first-class components in Eleventy, expanding HTML elements to HTML with defined conventions from web standards. WebC components are compatible with server-side rendering and are Progressive Enhancement friendly. The plugin also provides features such as incremental builds, streaming compatibility, scoped component CSS, and easy bundling of CSS and JS for page-specific bundles. It can handle complex templating needs and works well with web component hydration using is-land.

Features

• Brings first-class components to Eleventy: Allows the creation of components in Eleventy using the WebC format.
• Expand HTML elements: Converts HTML elements, including custom elements, to HTML using defined conventions from web standards.
• Compatible with server-side rendering: WebC components can be rendered on the server side without duplicating author-written markup.
• Progressive Enhancement friendly: WebC components follow the principles of Progressive Enhancement.
• Incremental builds: Provides first-class incremental builds for page templates, components, and Eleventy layouts.
• Streaming friendly: Supports streaming on the Edge, optimizing performance.
• Scoped component CSS: Easily scope component CSS or use your own scoping utility.
• Global or per-page no-import components: Provides options to use global or per-page no-import components, avoiding the need for component imports.
• Shadow DOM friendly: Works with or without Shadow DOM.
• Async-friendly configuration extensions/hooks: All configuration extensions/hooks into WebC are async-friendly out of the box.
• Bundler mode: Easily rolls up the CSS and JS used by WebC components on a page into page-specific bundles.
• Dirt-simple critical CSS/JS: Loads only the necessary code with dirt-simple critical CSS/JS.
• Render any existing Eleventy template syntax: Supports rendering of existing Eleventy template syntax (Liquid, markdown, Nunjucks, etc.) inside WebC.
• Works with is-land for web component hydration: Works seamlessly with is-land for web component hydration.