The #WebComponentsAdvent is over, and I'm doing some finishing touches before making it #opensource next week. Then I'll work on updating the Awesome #WebComponents list. By the way, if you like it, give it a star on #GitHub!
#WebComponentsAdvent
#WebComponentsAdvent Day 24: Who to Follow.
Today is not #FollowFriday but I'm still glad to share the final day of this series about #WebComponents, which is dedicated to all the awesome folks in the #fediverse community who #useThePlatform and rely on web standards. This project wouldn't be possible without your work!
#WebComponentsAdvent Day 23: Starter Templates.
If you want to start creating #WebComponents, today's update is for you! Meet the list of starters kits with @vite, #buildWithLit, #vue, #svelte, FAST, Shoelace, other libraries and tools.
#WebComponentsAdvent Day 22: Talks and Recordings.
Unlike fancy frameworks, #WebComponents don't make so much noise at modern frontend conferences and don't produce so much wow among #javascript developers. But I still have some great talks to share with you today:
#WebComponentsAdvent Day 21: Case Studies.
Today's update is a list of real-world cases and stories shared by different teams who used #WebComponents in production. Do check it out especially if you consider using #CustomElements or #ShadowDOM in your project.
#WebComponentsAdvent Day 20: Standalone Elements.
Do you remember the old motto "there is an element for that"? While we don't have a new version of the #WebComponents catalog out yet, I got you covered! Meet the list of awesome standalones (more to come later):
#WebComponentsAdvent Day 19: Showcase.
I enjoy reading the stories shared by developers who build #WebComponents. Despite years of experience in the field, I often learn a lot from their challenges, mistakes and pain points. Here's some reading I recommend:
@bp Sure. Some sections are still a bit outdated because I was busy with #WebComponentsAdvent lately, and the blackout last week made it a challenge. I'll get to polishing the content during the holidays.
@DavidDarnes Say no more! The #WebComponentsAdvent that I'm working on is basically just a bunch of links. Plain #html and no #javascript whatsoever.
#WebComponentsAdvent Day 18: Testing Solutions.
While JSDOM supports #WebComponents, it's usually better to test them in real browsers that people actually use. Today's update provides examples of using Web Test Runner by #ModernWebDev, #Cypress, #Playwright and other tools.
#WebComponentsAdvent Day 17, Part 2: Polyfills and Shims.
Experimental features related to #WebComponents are usually supported only by a subset of browsers. But you can still try them in your projects using polyfills. Here you can find several options:
#WebComponentsAdvent Day 17: Proposals and Drafts.
While #WebComponents in general have great browser support, there are still some important proposals and drafts currently being discussed, prototyped and implemented. Today's update is a list of relevant materials.
#WebComponentsAdvent Day 16: Documenting.
Today's update is about Custom Elements Manifest and various tools for documenting #WebComponents. This is essential to enable IDE support and code completion for better developer experience.
#WebComponentsAdvent Day 15: Opinions and Takes.
People have been talking about #WebComponents for years. Today's update includes 20 articles from different developers with their criticism, rant and praise. And this is still not a comprehensive list!
#WebComponentsAdvent Day 14: Frameworks Recipes.
#WebComponents can be used with any frontend framework, like #react, #angular, #vue, or #svelte. Today's update describes some approaches and techniques you might need to use for better developer experience.
#WebComponentsAdvent Day 13: Styling Options.
Styling #WebComponents is a huge topic: new #CSS selectors, custom CSS properties, Constructable Stylesheets... Some people suggest to ditch #ShadowDOM, others want to use #Tailwind. Let's dive into it!
#WebComponentsAdvent Day 12: Guides and Tutorials.
There are many questions to answer when creating #WebComponents: which library to use, how to handle data and state, etc. Here is a list of articles that give some answers (with more to be added later).
#WebComponentsAdvent Day 11: Best Practices.
Unlike full-blown frameworks, #WebComponents do not enforce you to code in a certain way. Check out the today's update to learn about important things to consider and to avoid making common mistakes.
#WebComponentsAdvent Day 10: Codelabs.
If you are new to Web Components and don't know where to start, today's update is for you! Check out codelabs: detailed step by step tutorials created by #buildWithLit, Chrome Developers and #OpenWc teams:
#WebComponentsAdvent Day 9: Component Libraries.
Apart from #designsystems, today there is a plenty of other use cases for #WebComponents: CMS, scientific writing, 2D and 3D scenes and even creating VS Code extensions. Check out the today's update to discover more:
Client Info
Server: https://mastodon.social
Version: 2025.04
Repository: https://github.com/cyevgeniy/lmst