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.