Skip to content

11ty/eleventy-plugin-webc

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
September 23, 2022 17:30
September 23, 2022 15:40
September 23, 2022 22:47
October 4, 2022 17:25
November 18, 2022 21:28

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.