Setting `ariaDescribedByElements` on a node silently fails when the target is in a different shadow root. The spec broke `=` to preserve encapsulation purity. This violates the Priority of Constituencies, harms AT users, and should be fixed immediately. Reference Target is complementary and welcome, but it is not a substitute for making imperative assignment work.
Read more...
In 2024 we server-rendered Lit web components in Drupal using a Node.js sidecar container. Now we can do it with a single Go binary that embeds a WASM module -- no Node.js, no containers, no external services. The Drupal module is called Backlit.
Server-rendered web components require no javascript up front. Declarative Shadow DOM let's you render your components' shadow roots before the page finishes loading. While the Lit framework's utilities for SSR are still experimental, we can write a proof-of-concept to integrate with Drupal.
Read more...
Just because we could didn't mean that we should
Has keyboard endgame been acheived? LOL no, but we had fun along the way.
An opinionated development server for HTML and custom elements. Like Storybook, but it's all about HTML - no framework required. Auto-generated knobs, smart reload, and manifest-driven demo discovery.
After 3+ years, Apollo Elements v3.0.0 is here with Apollo Client 4 support, Node.js 24, and a cleaner API. Build GraphQL-powered web components that work in any framework—or no framework at all.
The Jewish people are fighting for their lives. Stand with them. Put this Web component on your web site to direct visitors to donate to Israeli causes
דרשה על ספירת העומר ואיסרו חג שניתנה בבית הכנסת שערי רחמים ושמחה בירושלים
Remember wishing your editor actually *understood* your custom elements? Wish granted. The CEM Language Server is here, and it's built right. ✨ After weeks of development, the CEM Language Server is finally here! Built from the ground up in Go with proper error handling, comprehensive testing, and all the LSP features you'd expect for working with custom elements.
Read more...
The BlueBuild project is an easy and fun way to customize your own operating system.
Design tokens are the single source of truth for UI styling. The `design-tokens-language-server` makes working with design tokens a seamless experience in your everyday development workflow.
Design systems are tools, not solutions. They're not there to solve every problem for every team, but rather to put quality tools in the hands of skilled craftsmen.
In honour of Hannukah this year, I undertook to write 8 web components tips, one for each night of the festival. Tonight is the 8th and final night of the festival. The mystics said that this night combines and contains aspects of each of the seven previous nights, so I'd like to share a compilation of those tips with the dev community.
Try using decorators to narrow the type of JavaScript subclass accessors
The react team could have implemented HTML support in React 18, they could have even let others do it for them, but they didn't. It's time to reconsider a web framework which is at best negligent and at worst actively hostile to web standards.
Node 22.6 introduced the --experimental-strip-types flag, and eleventy 3.0.0 adds support for JavaScript module configs, which means we can set up an 11ty project written in TypeScript using esm and build it without tsc.
Self-hosting the firefish fediverse microblogging app isn't as hard as you might think. Using Gentoo Linux and Podman on a Raspberry Pi, initial setup is almost entirely straightforward
In large organizations, it takes many inputs across multiple teams to produce a single web page. Import maps aid in reducing the potential friction between teams by abstracting package names over resource URLs.
Mastodon is probably a great idea, but is extremely hostile to Jews, so I'm out
Read more...
Unsuspecting #react users may come to believe that #WebComponents break react, but the truth is - as usual - exactly the opposite. Despite the superficial similarity to #HTML, react's JSX language breaks the web platform's powerful native slot element.
Organize and automate your 11ty blog's post structure with ISO dates and some quick JavaScript.
A cheeky hack to make <slot> elements work as expected in 11ty's WebC framework.
How to run a nested gnome session (wayland) so you can test out changes to a GNOME extension without having to log out.
Use #Neovim's #treesitter and #lua APIs to script a function that toggles between #HTML and #markdown image synax
Import maps, the new browser standard, open up a world of possibilities for factoring and optimizing web pages and experiences. In this post, we explore one of them briefly: developing a static import-map-based #CDN to serve your #NPM packages.
מקלדת נוחה וארגונומית לעברית שמבוסס על המקלדת הלטינית דבוראק
New Neovim Plugin - Basic support for WebC files
#eli5 (explain to me like I'm 5-years-old) what #WebComponents are and how they're different from #javascript-heavy #frameworks
Wrapping emoji in element with #aria-label is an #accessibility practice recommended by experts like Leonie Watson. This post builds on work by Kitty Giraudel and others in automatically wrapping emoji in your #11ty/#eleventy pages.
Thoughts from my first attempt at understanding the new WebC framework from 11ty
Putting some shine on one of Makecode's built-in exercises. Add features to Tug-of-LED like audio, network, and fancier graphics. Students will learn about functions, arrays, and audio frequency while improving their gameplay.
New Neovim Plugin - separate lists into multiple lines then glue them back together
Save money and build minutes while rebuilding your 11ty site using GitHub Actions and the netlify CLI
Use SVG icons in Eleventy and only ship the code you need.
Let's spice up the stock makecode countdown tutorial
Instead of one night of web components posts, we get eight crazy nights!
Let's use makecode to turn a micro:bit into a dreidle!
Use the new form-associated custom elements and ElementInternals standards to create accessible custom elements which behave like native HTML form controls.
Using Lit-style reactive controllers, learn how to easily add redux-style state reducers to your web components.
Build and accessible, web-native colour picker component that works in any framework with the web components APIs.
Stripe Elements custom elements work across front-end frameworks and even in vanilla HTML and JS.
Some say that promises shouldn't be used when async await is available but that's not always true. Here's why 'promise chains' are actually amazing.
How to overlay content on top of an image or other element simply using CSS Grid.
Let's build a web component to embed a dev.to feed in a page.
You don't need to give up your frameworks to use web components. You can use them anywhere you can use HTML and JavaScript.