Web Components bookmarks

Today it's time for the first monthly update in 2023 — and it's been quite an eventful month for Web Components! I'm excited to share with you some highlights from the community. A few of them got way less attention than they deserved, that's why I decided to challenge myself with publishing regular updates. So, let's see what new for Web Components in January 2023.

Safari TP 162

Yes, you got it right: Safari is the main news maker for Web Components this month! Meet the brand new Technology Preview 162 with a bunch of improvements, including two notable features for Web Components: form associated Custom Elements and declarative shadow DOM support. I mentioned both in the 2022 Year in Review blog post, happy to see the progress!

Are you wondering what does this mean in practice? This CodePen is quite a good demo of the new additions to the Custom Elements standard. By the way, its creator Caleb Williams also maintains a polyfill for ElementInternals which you can find under Polyfills. And if you are looking for an in-depth overview, check out also Form Participation and Proposals.

Declarative Shadow DOM

This proposal deserves its own mention, as there are even more good news. In addition to Chrome and Safari, there is now an update from Firefox team: the position has changed from "neutral" to "positive". While adding new features to browsers takes time, there is still hope that Shadow DOM streaming and proper SSR might become a reality sooner than later.

By the way, Elliott Marquez from the Lit team published a small example for testing declarative shadow DOM streaming, which at the time of writing is also available in Chrome Canary (the new implementation didn't land in Chrome stable yet). The demo is quite small, check it out if you are interested to see the new attribute on the <template> element in action.

Web Components Guide

Launched just recently, this project is already invaluable for anyone who wants to learn writing Custom Elements from scratch, without a need for any libraries or tools. The work done by Keith Cirkel is really impressive. The Web Components community was definitely in need of such a detailed guide, and I was happy to update my own project with add a bunch of links to it.

That said, this project is still in its early days, and I'm curious to observe how it evolves. Some parts are marked as incomplete, which is a chance to contribute. I'd like to recommend a tutorial on how to create a Mastodon Toot Embed by Kristján Oddsson: it's a very well written and clear guide. Creating such learning content for beginners is often harder than it seems.

HTML With Superpowers

Speaking of learning content for Web Components, here's another resource worth checking out: HTML With Superpowers. This website is a guidebook for the Frontend Masters course about Web Components, open sourced by its creator Dave Rupert on January 5. While I haven't had a chance to take that course yet, the level of detail makes me feel like it's a good idea.

The section I like the most is Frequently Asked Questions: in my opinion, Web Components were lacking this before. Especially, the Accessibility part is great: first it briefly outlines the problem and then points to further reading. However, I'm a bit biased due to the fact that Routing section that recommends Vaadin Router: it is a project that I used to work on in the past :)

Shoelace 2.0 Stable

Have you heard about Shoelace? It's a great library of Web Components built by Cory LaViska. While it's not the only example of a successful one-man show, Shoelace is unique: even React developers like it, and that's a bit unusual for Web Components, isn't it? Furthermore, last year we heard some huge news: Shoelace and Cory LaViska joined Font Awesome.

One thing that was special about Shoelace due to the past two years was its infinite beta stage. If you remember Babel 7, then you probably understand what I'm talking about — except that Shoelace had 88 (!) beta releases. Now it is finally stable — and from an outsider's perspective, it's been quite a journey. If you don't trust me, check out the Git diff since the first beta.

New Bookmarks Additions

After all the awesome news above, I'd like to also share some of my personal highlights. After a short holidays break I continued to work on Web Components bookmarks. Notable changes that landed this month include navigation improvements and the Home page redesign. To be honest, design skills aren't among my strengths, but I always try to do my best.

On top of that, I published two new categories: the Beginner's Guide with a bunch of articles for newcomers, and the collection of Testing Helpers with some utilities that make testing Shadow DOM easier among other things. Overall, there were 32 new additions to this website in January, including Standalone Elements, Frameworks Recipes, Talks and Recordings, and more.

Closing Words

That's a wrap for Web Components in January 2023. It's been a great start of the year, and of course we can't be sure that the next update will be equally awesome. Nevertheless, I really hope that we'll still have some good news around this topic in the upcoming months. If you are working on something that might deserve a mention next time, let's get in touch.

Thank you for reading! I hope you like the idea of this project and the monthly update. If so, please give it a star on GitHub. Also, contributions are always welcome and super simple: after all, this is just a static website built with Eleventy 2.0 beta). My goal is to make it a great place for anyone passionate about Web Components, so improvement ideas are appreciated.