The WebC plugin brings a component model similar to frameworks like Vue and Svelte to Eleventy. It allows you to create HTML-only components (basically includes) all the way up to interactive Web Components with shadow DOM and all the benefits it offers.

I generally get by just fine without components in 11ty. Nunjucks macros are fine, but they never really felt like true components to me. They also are super clunky to work with, IMO.

Shortcodes are great, but they also feel just a small step away from first-class components. WebC components bring all of the things you would expect from a component model—the ability to pass in “props”, slots for placing content, CSS scoping—to Eleventy.

Killer features

Here are some of my initial impressions that got me excited about the Eleventy WebC plugin. I’m sure I’ll need to add to this list as I get a bit more experience under my belt.

Slots and composition

Slots in WebC components do a bit more than the standard element used in Web Components. They have the ability to work just like Web Component/custom element slots, but they can also function similar to something like the built-in props.children in React.

I see a lot of potential here. You could do some very cool things when combined with layout chaining like create your own template/layout inheritance without having to use Nunjucks layout inheritance, or create compound components like a site header:
<site-header>
<site-header-logo slot="logo">site-header-logo>
<site-header-nav slot="nav">site-header-nav>
site-header>
Render functions
Render functions are pretty cool. To me, they seem a lot like shortcodes except you don't have to register them in your .eleventy.js (or whatever yours is called) config file. Instead, you can keep them alongside your other components or includes as a HTML/.webc file. Here's and example of a simple list component using a render function.
<h2><slot>slot>h2>
<ul>
<script webc:type="render" webc:is="template">
function renderItems() {
const numbers = ['One', 'Two', 'Three']
return numbers.map(number => `${number}`).join('')
}
script>
ul>
Concepts I need a bit more time with
It usually takes me a while to really wrap my head around new concepts like this. I'm sure I'll get there once I have the chance to work through some real-world use cases, but are some things that aren't quite clicking for me yet.
Gimme some sugar
I LOVE the idea of 11ty single file components, but it would rule to have some syntactic sugar for flow control similar to Vue, Svelte, etc. Also a mustache-like syntax for expressions that render data, variables, etc would be very handy. I could just be missing something here though.
Maybe a lot of folks are going to prefer what feels, in my opinion, more like JSX with render functions and the