JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3534
  • Score
    100M100P100Q147378F
  • License MIT

WebC support for Eleventy adds for Single File Web Components

Package Exports

  • @11ty/eleventy-plugin-webc
  • @11ty/eleventy-plugin-webc/eleventyWebcPlugin.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@11ty/eleventy-plugin-webc) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.