Home
Softono
eleventy-plugin-webc

eleventy-plugin-webc

Open source JavaScript
Website GitHub
133
Stars
12
Forks
46
Issues
6
Watchers
6 months
Last Commit
Static Site Generators Web Components & Widgets

About eleventy-plugin-webc

eleventy-plugin-webc is an Eleventy plugin that adds native support for WebC, a single-file web component format. It brings first-class component capabilities to static site generation, allowing developers to expand custom HTML elements using web standard conventions. The plugin enables server-side rendering without markup duplication and ensures progressive enhancement compatibility. Key features include incremental build support for templates and components, streaming readiness for edge deployment, and flexible CSS scoping options. It offers global or per-page component registration to eliminate repetitive imports and works with or without Shadow DOM. The plugin is fully async-friendly and includes a bundler mode to roll up only the necessary CSS and JavaScript for each page, facilitating critical CSS/JS extraction. Additionally, it allows embedding existing Eleventy template syntaxes like Liquid, Markdown, or Nunjucks directly within WebC files. It integrates seamlessly with is-land for partial hydration s

Platforms

Web Self-hosted

Languages

JavaScript

Links

Website Source Code
1
Published by
11ty
Visit View Profile

README.md

View on GitHub

11ty Logo

eleventy-plugin-webc 🕚⚡️🎈🐀

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

npm Version

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.