WebC for 11ty

I love 11ty and use it for pretty much every personal project. One of the main things that I've wanted for 11ty is a robust way to work with reusable components. I've used Vue for a while now and one of the things I like about it are the single file components. Being able to have the HTML, scripts and styles all in one place is useful, especially the ability to scope styles to the component. I've always wished that 11ty had something similar.

Guess what? Now it does!

What's WebC?

What it means to me is basically single file components for 11ty. You can find a more thorough and accurate explanation on the official site. You get reusable components you can use on your website that will render to the client as static HTML. It also gives you scoped CSS!

Single file components for 11ty

I've used 11ty for a while now and I've played around with different methods to to give me a similar experience to what I'm used to in Vue. The closest I got was using Nunjucks macros. These gave me the ability to have reusable components with props but it wasn't perfect. There was no way to scope the styles so you still had to rely on global styles. The markup needed to create the macro also made it hard to easily tell what macro was doing.

What's good about WebC?

Lots. Here's are a few of the obvious ones for me:

What are the downsides?

Nothing's perfect but this isn't far off!

Where can I learn more?

I'm still getting my head around WebC and I know I've barely scratched the surface of what it can do. Here are some resources I found useful:

Also, there's a link to my starter template.