Do I know any @developers devs that work close to #css that I could nerdsnipe into figuring out how chromium could catch up to webkit in so far as a `:host(:has(~ ul li)) {}` selector?
See it in action, here: https://codepen.io/Westbrook/pen/EayLZow
Checkout the #CSSWG convo, here […]
![window.customElements.define("test-a", class extends HTMLElement {
static disabledFeatures = ["shadow"];
shadow = this.attachShadow({ mode: "open" });
});
document.createElement("test-a"); // Error: attachShadow is disabled
window.customElements.define("test-b", class extends HTMLElement {
static disabledFeatures = ["internals"];
internals = this.attachInternals();
});
document.createElement("test-b"); // Error: attachInternals is disabled](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:efcyuflqnbzhmaob2pelkpgo/bafkreicvaqbk3gygdnfglb7lhvigr3nfgk2j4pcvxafh4gozjrm4ptngtq)
window.customElements.define("test-a", class extends HTMLElement { static disabledFeatures = ["shadow"]; shadow = this.attachShadow({ mode: "open" }); }); document.createElement("test-a"); // Error: attachShadow is disabled window.customElements.define("test-b", class extends HTMLElement { static disabledFeatures = ["internals"]; internals = this.attachInternals(); }); document.createElement("test-b"); // Error: attachInternals is disabled
Wait, what? There is a way to disable certain web component features via a static class field? Just randomly stumbled upon this in the specs. Can't find much documentation, but it works in Chrome and Firefox at least.
👉 html.spec.whatwg.org/multipage/cu...
#webcomponents #webdev #javascript
This month’s blog post is brought to you by the letters V-D-T. If you read through my rant and have any solutions to these problems please let me know!! VDT is hard!
michaelwarren.dev/blog/vdt-is-...
#webcomponents
“This is how I ended up creating Elena, a library that I’m open sourcing today. Elena starts from HTML and CSS, and stays grounded in web standards and what the web platform natively provides.”
arielsalminen.com/2026/progres... #WebComponents #OpenSource #Elena #DesignSystems #resources
#Development #Launches
Elena · A tiny library for building progressive web components ilo.im/169a4a by Ariel Salminen
_____
#OpenSource #WebComponents #DesignSystems #Frameworks #ProgressiveEnhancement #WebDev #Frontend #HTML #CSS #JavaScript
I have been following this PWA-focused project and its ready for production. Elena - https://elenajs.com/
Ariel Saliminen explains its Progressive Web Components. arielsalminen.com/20... #elena #webComponents
<!-- In a blocking script (= ASAP), load CSS that will be used by the page AND web components as module scripts. Define a web component base class that adds the style sheet to shadow roots and ALSO add the style sheet to the document --> <script> { // Start module request. Yes, this works in a non-module script const styles = import("./bootstrap.min.css", { with: { type: "css" } }); // Add style sheet to the document styles.then((sheet) => document.adoptedStyleSheets.push(sheet.default)); // Define a base class for web components that also use the stylesheet window.BaseClass = class extends HTMLElement { constructor() { super(); this._shadow = this.attachShadow({ mode: "open" }); // Adopt sheet in shadow DOM. The style sheet object is shared // between components and the document styles.then((sheet) => this._shadow.adoptedStyleSheets.push(sheet.default), ); } }; } </script> <!-- Load component(s) as a plain old modules --> <script type="module" src="./component.js"></script>
If we want to share stylesheets between the document and components and we have CSS modules, is there any reason to use <link rel="stylesheet">? Loading CSS modules a blocking script in <head> (+ sharing it between shadow roots and the document) should be plenty fast, right?
#webdev #WebComponents
When I was at Microsoft, we were trying to find ways around some of the pain points of #WebComponents, so I did an exploration on what Declarative Custom Elements could potentially provide us.
#html #css #javascript
dev.to/stuffbreaker...
@davatron5000.bsky.social: "Burton Smith still uses Dev.to for his personal blog".
#webdev #webcomponents #designsystems
#Development #Introductions
Container Timing · A new API to measure web component performance ilo.im/16bf65 by José Dapena Paz
_____
#Metrics #Measurement #WebComponents #APIs #Polyfill #Chromium #Browsers #WebPerf #WebDev #Frontend
Form-Associated Custom Elements in Practice, by @frontendmasters.com:
frontendmasters.com/blog/form-associated-cus...
#webcomponents #forms #javascript
Container Timing: Measuring Web Components Performance, by @jdapena@mastodon.online (@igalia@floss.social):
blogs.igalia.com/dape/2026/02/10/containe...
#performance #webcomponents #chromium
#Development #Approaches
My favorite way to write code in 2026 · Test-driven development using Playwright ilo.im/16b947 by Chris Ferdinandi
_____
#Programming #Testing #Coding #WebComponents #Playwright #WebDev #Frontend #JavaScript #HTML #JavaScript
Aun flipando con la mejora de rendimiento de #federadeck como app #android solo con el cambio a #webcomponents, y eso que aun no he optimizado todo (que he tirado de asistencia con IA, así que me dará un yuyu cuando vea el código seguro)
Web Components: The "Missing Link" for Native Form Integration I recently realized that my Web Components in AgnosticUI were missing native form integration. Without Form-Associated Custom ...
#webcomponents #frontend #designsystems
Origin | Interest | Match
My new guide on @FrontendMasters shows you how to use FACE and ElementInternals to make your Web Components work natively with HTML forms.
Featuring implementation notes from the AgnosticUI trenches.
Check it out:
frontendmasters.com/blog/form-as...
#WebComponents #BuildInPublic
#Development #Introductions
Scoped registries for custom elements · How independent scopes resolve name clashes ilo.im/16b8np by Jayson Chen and Patrick Brosset
_____
#Registries #WebComponents #Chrome #Edge #Browser #WebDev #Frontend #HTML #JavaScript
Code Screenshot of the Source Dataset Pattern for custom invoker commands: html-code: <button commandfor="my-snap" command="--download" data-filename="my-image" data-format="jpeg"> Download Snapshot as JPEG </button>
#webcomponents and #invokerCommands are a match made in heaven. With the CommandEvents source property you can easily access the dataset or any other attribute of the element that invoked the command.
New blog post! I added Bluesky likes and liker avatars to my #Astro blog. No API keys, no server-side code, just pure delightful #webcomponents.
Here's how I went from "I want that" to "it's live" in about an hour:
loige.co/how-i-added-...
▷ ag context doesn't clobber your work
Generates AI context but only touches the AgnosticUI section. Everything else stays. HTML sentinel markers mean re‑runs = updates, not overwrites.
Run once. Run daily. Run safely.
www.agnosticui.com
#webdev #ui #webcomponents #css
Any #11ty people out there or #webcomponents people out there that have run into weird livereload issues when you're running 11ty on local dev server?
I'm wondering is morphdom is confusing the web component instances? @zachleat.com?
Great episode. Can’t wait to start using #WebComponents in some MCP projects I’m curious about.
別の個人サイト（バンドのサイト）をつくる準備として、 #WebComponents を静的な HTML にビルドする SSR 環境をZed の Pro プランの試用ついでにつくってみたら、結構自分が欲しいものができた :tony_neutral:
https://zed.dev/pricing
Snippets of (by itself not really useful) JS code that illustrate the main message without much benefit.
Somebody on LinkedIn asked for my approach to global CSS in #Webcomponents with Shadow DOM:
1. Import CSS as Strings (via Vite)
2. Shove CSS into the CSSStyleSheet Constructor
3. Add the results to ShadowRoot's adopted stylesheets
4. Delete all of the above once Safari supports CSS module scripts
Isomorphic Web Components | jakelazaroff.com
🔖 jakelazaroff.com/words/isomorphic-web-com...
🔗 ellyloel.com/isomorphic-web-component...
#Bookmarks #WebComponents
Repeatable Form Fields Made Simple, by @aaron@front-end.social:
www.aaron-gustafson.com/notebook/repeatable-form...
#forms #html #webcomponents
#Development #Proposals
Reference Target · Improving accessibility when using shadow DOM ilo.im/16aixw by Alice Boxhall
_____
#WebComponents #Accessibility #ARIA #Encapsulation #ShadowDOM #Browsers #WebDev #Frontend #HTML #JavaScript
President of #webcomponents logging on to share a couple good posts from over on the @frontendmasters.com blog... Here we go...
