eleventy-plugin-webc 🕚 ⚡️ 🎈 🐀
Adds support for WebC, the single file web component format, to Eleventy.
- This documentation has moved to 11ty.dev.
- Watch the crash course in Eleventy WebC on YouTube.
- Watch the Interactive Components tutorial on YouTube
- Star Eleventy on GitHub!
- Follow us on Twitter @eleven_ty
- Support 11ty on Open Collective
- Subscribe to our YouTube channel
Documentation
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.