#webc — Public Fediverse posts

Earlier this week I posted about rough edges I encountered using WebC. I wanted to follow up with specific technical details from the ones I documented in the process of converting my website to it.

https://chromamine.com/2025/07/webc-quirks/

#WebC #11ty #IndieWeb #WebDev

I’ve rewritten my #11ty blog’s templates in #WebC. I've written up the things I've found that I like—and don't like—about it.

https://chromamine.com/2025/07/switching-to-webc/

#WebDev #IndieWeb

#introduction

I make websites. Sometimes I toot about it.
#eleventy #webc #php #statamic #laravel #tailwindcss #alpinejs uhhh whatever #sql and I guess #nginx #docker and all that crap all the way down. #fullstack

I play RPGs with friends. Sometimes I toot about it.
#ttrpg #dnd #pathfinder #5e #pf2e

I am my group's sysadmin. Sometimes I toot about it.
#selfhosted #plex #lemmy #mastodon #pihole and throw some darts at https://selfh.st and you catch the rest.

Hot takes, bad jokes, etc.

I just launched https://catalog.muralarts.org for Mural Arts Philadelphia. (Design by https://CooperGraphicDesign.com.)

Built with @zachleat's #eleventy, #webc, and a bastardized version of the `eleventy-image` plugin that makes optimized CSS background images. I call it back-breaker.

Rendering very many AVIF images suuuuuucked on my potato PC, but it was absolutely necessary for such an image heavy design.

I really want to like #WebC for #11ty—there’s a lot of things I do like about it, both conceptually and in practice!—but I keep running into a lot of frustrating moments that are either limitations or bugs. The documentation is pretty underspecified so it’s not always clear to me which they are.

@zachleat What's the state of #WebC would you say?

It's a bit hard to say by looking at the repo alone, where no commits or release can be seen in the last 1.5 years: https://github.com/11ty/webc

I see that the #11ty WebC base has seen updates recently and I noticed you mentioned it to @brad_frost the other day https://fediverse.zachleat.com/@zachleat/113319126440275811

Maybe do what @ada did to her web component helper and do a commit to update the README with current state? https://github.com/AdaRoseCannon/html-element-plus/commit/9e6d4e5ad0966f205302a804f096aaf14c15e15c

I finally finished the blog post I started 3 months ago about rebuilding my website with WebC and going all minimal design.

https://fynn.be/blog/website-rebuilt-webc/

#Eleventy #WebC

Using Eleventy with WebC, you can conditionally add attributes to HTML elements using dynamic attributes.

But there's a gotcha... If it's a `style` or `class` attribute, use an empty string to leave off the attribute. Any other attribute needs boolean `false` to leave off the attribute.

doc:
https://www.11ty.dev/docs/languages/webc/#dynamic-attributes-and-properties

explanation starts here:
https://github.com/11ty/webc/issues/155#issuecomment-1496237565

#11ty #WebC

@luke I only got into #11ty recently and read the #WebC docs first, since it felt like the most modern iteration on templating: https://www.11ty.dev/docs/languages/webc/

I combined it with #TailwindCSS, wrote some glue code, and am quite happy at the moment.

How do I identify the current page in a #11ty #WebC component using eleventy-navigation ?

https://github.com/11ty/eleventy/discussions/3406

A `webc:scoped` CSS block breaks component props in #11ty #WebC ?

https://github.com/11ty/eleventy/discussions/3404#discussion-7014239

Can I pass arguments to a #WebC component in #11ty?

https://github.com/11ty/eleventy/discussions/3396

Look at that, basic semantic highlighting for WebC component tags and keyword attributes inspired by Vue’s VS Code extension.

https://github.com/mvsde/vscode-webc#semantic-highlighting

#Eleventy #WebC

I was thinking wrong about this. The VS Code feature we want are not symbols but definitions. Fortunately, definitions are not too hard to implement.

So, the newest extension version comes with support for “Go to Definition” and “Peek Definition”.

The readme also got an upgrade with feature screenshots.

Next up on the to do list would be “Go to References” and “Peek References”. Another cool feature, somewhat related to definitions.

https://github.com/mvsde/vscode-webc

#Eleventy #WebC

It might not look amazing yet, but the prove of concept for Ctrl + clickable WebC component tags is here.

This currently uses VS Code’s document links, which are relatively straightforward to implement, but technically not the correct way to do symbol linking.

So, when I have more time, I’ll dig into the symbol API for extensions, which conveniently lacks any useful documentation / example implementations whatsoever.

https://github.com/mvsde/vscode-webc/releases/tag/v0.2.0

#Eleventy #WebC

So… I got side-tracked while writing a blog post about the WebC migration of my @eleventy powered website and long story short, I created a VS Code extension for WebC instead 😅

It’s super basic for now, providing just the `.webc` to HTML file association and suggestions for WebC-specific HTML attributes including links on hover to the documentation.

I have more plans though, for example linking tags to their respective files so you can Ctrl+Click.

https://marketplace.visualstudio.com/items?itemName=fynn.vscode-webc

#Eleventy #WebC

Finally merged and published the WebC rework and light redesign of my website.

I’m by no means a designer (anymore) so I kept things basic and pushed myself to hit that deploy button already after weeks and weeks of being uncertain about it 😅

The site now runs on @eleventy v3 and is fully migrated to ESM, no CommonJS anymore.

https://fynn.be

#Eleventy #11ty #WebC

I have just released version 3.0 of Eleventy Excellent, now fully on ESM and with many other changes, including my attempts to learn more about WebC and web components. Contributions very welcome! 💚

https://eleventy-excellent.netlify.app/blog/eleventy-excellent-30/

#11ty #webc

Bon… j'ai une nouvelle idée de pet project.

À base de #11ty, #webc , #stimulus & #openprops

Ça va être un peu sport quand même.

Mi lista de deseos (o requerimientos) para lo del blog:

- el contenido es markdown peeeero...
- quiero poder embeber videos fácilmente...
- y también ejemplos de código editables

Creo que con #11ty y #webc lo podré hacer de manera relativamente sencilla.

Por lo demás, dos taxonomías, una de categorías (poquitas) y otra de etiquetas (según me vengan).

Me estoy acordando de las cosas que proponía Van Kesteren allá por ¿2004? sobre navegación basada en fechas. Igual quiero un poco de eso.

I would like to share some thoughts about working with #WebC.
For some time now I have been using it on a component basis in #Eleventy sites that otherwise depend primarily on Nunjucks or Liquid. The "non-traditional WebC usage" (https://www.11ty.dev/docs/languages/webc/#non-traditional-webc-usage).

For components without major complexity, this is something that works well for me. However, I have also tried to rely entirely on WebC, which, as I understand it, is the intended approach.

Finally finished the rewrite of my personal website! This time its (almost) entirely WebC!

https://andy.bond

I simplified my site a lot - largely after being inspired by @cory and his "Now" page. Previously I was rendering a page for every book, show, movie, that I tracked - and it was too much to manage!

Maybe now I will actually write something every once in a while since I will hopefully be done with large overhauls :)

#11ty #eleventy #webc

After a long hiatus, I picked up work on my site again. Started off pretty simple with some housekeeping 🧹

1️⃣ Organized my styles using CSS layouts
2️⃣ Reorganized layouts and did some light-touch content updates
3️⃣ Cleaned up my backlog of planned work

#css #webc #eleventy

@tbeseda Great idea! I was building my sparklines in a similar way, as part of my website's build process (using #WebC), until I published <svg-sparkline>. Mostly as a means of "Don't tell me, show me" and all that.

https://github.com/chrisburnell/chrisburnell.com/blob/main/src/components/c-sparkline.webc

I think there's probably a sweet medium to be found between building them on the server as light DOM, but throwing a little client-side JS at them to get the handy on-the-fly updates from listening to attribute changes.

Just haven't gotten round to it yet!

I've got a cool #eleventy site in the works. Well, the actual end result will not be that interesting, but it's going to be a fun one to build.

I've got a hopelessly out-of-date Drupal site with broken deployments that I'd rather not fix, so I wrote some fairly simple scrapers to grab most of the content and directly generate new #markdown files.

It's all going to be built with #webc and a few #webcomponents.

FYI, I'm not using a framework or library for Web Components. I’m doing it vanilla, which isn't too difficult. #webdev #webc

Just listened to the #ShopTalkShow episode with @zachleat talking about the current state of #11ty, #WebC and Twitter. It's been a while since I tuned in and it's like catching up with an old friend. Thanks @chriscoyier @davatron5000 ✌️
https://shoptalkshow.com/543/
#WebDev

Just listened to the #ShopTalkShow episode with @zachleat talking about the current state of #11ty, #WebC and Twitter. It's been a while since I tuned in and it's like catching up with an old friend. Thanks @chriscoyier @davatron5000 ✌️
https://shoptalkshow.com/543/
#WebDev

Just listened to the #ShopTalkShow episode with @zachleat talking about the current state of #11ty, #WebC and Twitter. It's been a while since I tuned in and it's like catching up with an old friend. Thanks @chriscoyier @davatron5000 ✌️
https://shoptalkshow.com/543/
#WebDev

Just listened to the #ShopTalkShow episode with @zachleat talking about the current state of #11ty, #WebC and Twitter. It's been a while since I tuned in and it's like catching up with an old friend. Thanks @chriscoyier @davatron5000 ✌️
https://shoptalkshow.com/543/
#WebDev

Just listened to the #ShopTalkShow episode with @zachleat talking about the current state of #11ty, #WebC and Twitter. It's been a while since I tuned in and it's like catching up with an old friend. Thanks @chriscoyier @davatron5000 ✌️
https://shoptalkshow.com/543/
#WebDev

Pro: #Storybook renders #LitElement
Con: I can't copy the file as-is to #Eleventy and have it execute (I believe a compilation step is needed.

Time to look into #WebC and #WebComponents then, I guess.