Using Eleventy and WebC for Simpler, Performant Web Components
summary
WebC is an Eleventy plugin that generates server‑rendered components from .webc files, reducing or eliminating shipped JavaScript and letting Eleventy extract and bundle JS/CSS into page buckets; requires Eleventy 1.2.x beta, npm install @11ty/webc and enable in .eleventy.js. Components support attributes binding, slots, conditionals, and can embed Liquid or other template languages for looping. CSS can be scoped CSS (Eleventy adds prefix wrappers), and scripts become bundled assets unless explicitly left raw. A Google Static Maps component is built in minutes and outputs plain image tags with no JavaScript.
AI-written summary · about
chapters (10)
- 0:00Introduction and context
- 3:24Understanding web components
- 8:52Getting started with WebC
- 11:50Building static components
- 14:01Working with data and logic
- 18:44Slots in WebC
- 21:31Managing JavaScript in WebC
- 25:48Scoped CSS and advanced use
- 29:47Practical component demo
- 31:45Q&A and closing thoughts
related talks
24mThe Good, The Bad, and The Web Components
28mThe (Real) State of Web Components
39mWeb components - A whirlwind tour
51mBuilding web applications with Web Components
48mWeb Components as micro apps
01h 12mMake Web Development Fun Again, with Web Components
46mWhat ever happened with Web Components?
41mHigh-Performance Web UI with Web Components