![11ty Logo](https://www.11ty.dev/img/logo-github.svg)
eleventy-plugin-webc πβ‘οΈππ
Adds support for WebC, the single file web component format, to Eleventy.
![npm Version](https://img.shields.io/npm/v/@11ty/eleventy-plugin-webc.svg?style=for-the-badge)
This documentation has moved to 11ty.dev.
Features
- Brings first-class components to Eleventy.
- Expand any HTML element (including custom elements) to HTML with defined conventions from web standards.
- This means that Web Components created with WebC are compatible with server-side rendering (without duplicating author-written markup)
- WebC components are Progressive Enhancement friendly.
- Get first-class incremental builds (for page templates, components, and Eleventy layouts) when used with
--incremental
- Streaming friendly (stream on the Edge π)
- Easily scope component CSS (or use your own scoping utility).
- Tired of importing components? Use global or per-page no-import components.
- Shadow DOM friendly (works with or without Shadow DOM)
- All configuration extensions/hooks into WebC are async-friendly out of the box.
- Bundler mode: Easily roll up the CSS and JS in-use by WebC components on a page for page-specific bundles. Dirt-simple critical CSS/JS to only load the code you need.
- For more complex templating needs, render any existing Eleventy template syntax (Liquid, markdown, Nunjucks, etc.) inside of WebC.
- Works great with is-land for web component hydration.