Skip to content

11ty/eleventy-plugin-webc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

1b5fea1 · Jan 28, 2025
Jan 27, 2025
Jan 27, 2025
Jan 27, 2025
Jan 27, 2025
Jan 27, 2025
Sep 23, 2022
Mar 2, 2023
Oct 4, 2022
Jan 28, 2025
Jan 28, 2025

Repository files navigation

11ty Logo

eleventy-plugin-webc 🕚⚡️🎈🐀

Adds support for WebC, the single file web component format, to Eleventy.

npm Version

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.