#WebComponents

1 hour ago

Container Timing: measuring web components performance An introduction to Container Timing, a new web performance API that lets developers measure when complex components finish painting and shows how to use its native implementation now available behind a Chromium feature flag.

Container Timing: Measuring Web Components Performance, by @jdapena@mastodon.online (@igalia@floss.social):

blogs.igalia.com/dape/2026/02/10/containe...

#performance #webcomponents #chromium

0 0 0 0

Inautilo

@inautilo.bsky.social

1 day ago

My favorite way to write code in 2026 (on becoming a TDD addict) I’ve hated writing JavaScript tests for pretty my whole career. That thing where you plan a component, write some code, iterate it a whole bunch until it works the way you want… and then write tests...

#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

1 0 0 0

Ahoi.dev

@ahoi.dev

2 days ago

Bunny Stream Introduces New Video Player | Ahoi.dev Bunny.net has just announced the general availability of the new Bunny Stream Video Player, which has been developed using Web Components and Media Chrome.

Bunny Stream introduces new Video Player 👉 aho.is/e29e123c #MediaChrome #WebComponents

0 0 0 0

Cristopher 🇪🇨 🇧🇻🇪🇦🇮🇨

@cristodcgomez.dev

3 days ago

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)

0 0 0 0

Mozilla

@mozilla.activitypub.awakari.com.ap.brid.gy

3 days ago

Web Components: The "Missing Link" for Native Form Integration How I brought first-class Form support to AgnosticUI using ElementInternals

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

1 0 0 0

AgnosticUI

@agnosticui.bsky.social

3 days ago

Form-Associated Custom Elements in Practice When you make a Web Component for a form element, you've got a bit of extra work to do to make sure they participate on the form in expected ways.

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

5 0 0 1

Inautilo

@inautilo.bsky.social

5 days ago

Make custom elements behave with scoped registries | Blog | Chrome for Developers You can now encapsulate custom elements.

#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

0 0 0 0

Michael G

@g12n.de

6 days ago

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.

1 0 0 0

Luciano Mammino 📙 Node.js Design Patterns

@loige.co

1 week ago

How I added Bluesky likes to my Astro blog Learn how I added Bluesky likes and avatars to my Astro blog using the bluesky-likes web components package. No API keys, no server-side code, just a few lines of Astro magic.

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-...

11 3 2 0

AgnosticUI

@agnosticui.bsky.social

1 week ago

▷ 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

2 0 0 0

❄️ Jim Schofield ☃️

@jschof.dev

2 weeks ago

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?

0 1 2 0

EdgeRiffs

@edgeriffs.bsky.social

3 weeks ago

Great episode. Can’t wait to start using #WebComponents in some MCP projects I’m curious about.

0 0 0 0

GENKI

@nibushibu.social.vivaldi.net.ap.brid.gy

3 weeks ago

Zed — Pricing All options include fast performance, multiplayer collaboration, and weekly releases that level up how you build.

別の個人サイト（バンドのサイト）をつくる準備として、 #WebComponents を静的な HTML にビルドする SSR 環境をZed の Pro プランの試用ついでにつくってみたら、結構自分が欲しいものができた :tony_neutral:

https://zed.dev/pricing

0 0 1 0

Andrew Wooldridge ⛰️

@triptych.social.lol.ap.brid.gy

3 weeks ago

Web Components: The Framework-Free Renaissance Modern browsers now support everything needed to build sophisticated, reactive web interfaces without React, Vue, or Angular. Web components, custom elements, shadow DOM, and native event systems l...

www.caimito.net/en/blog/2026/02/17/web-c... #webdev #webcomponents

0 0 0 0

Peter Kröner

@sirpepe.bsky.social

3 weeks ago

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

5 1 1 0

Elly Loel

@elly.lol

1 month ago

Isomorphic Web Components | jakelazaroff.com The lack of server-side rendering in web components has become a sort of folk belief that oft goes unquestioned. I am happy to report that the fears are unfounded.

Isomorphic Web Components | jakelazaroff.com

🔖 jakelazaroff.com/words/isomorphic-web-com...
🔗 ellyloel.com/isomorphic-web-component...

#Bookmarks #WebComponents

1 0 0 0

Frontend Dogma

@frontenddogma.com

1 month ago

Repeatable Form Fields Made Simple :: Aaron Gustafson Sometimes you need users to provide multiple instances of the same information—multiple email addresses, phone numbers, team members, or emergency contacts. The form-repeatable web component makes this straightforward, handling field duplication, automatic renumbering, and seamless form submissio…

Repeatable Form Fields Made Simple, by @aaron@front-end.social:

www.aaron-gustafson.com/notebook/repeatable-form...

#forms #html #webcomponents

1 0 0 0

Inautilo

@inautilo.bsky.social

1 month ago

Reference Target: having your encapsulation and eating it too How reference target allows us to improve accessibility when using shadow DOM

#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

1 0 0 0

Dave Rupert

@davatron5000.bsky.social

1 month ago

How I Write Custom Elements with lit-html You can use a smaller part of Lit to build web web components that still take advantage of some of it's best features, particularly if you're cool with Light DOM.

President of #webcomponents logging on to share a couple good posts from over on the @frontendmasters.com blog... Here we go...

33 3 2 0

Burton Smith

@stuffbreaker.bsky.social

1 month ago

When you are in an #html file and you want to go-to-definition for a custom element, what do you think the behavior should be? Should it go to:

- type definition
- JS file where class is defined
- CEM entry
- something else

#webcomponents #javascript

1 0 5 0

Peter Kröner

@sirpepe.bsky.social

1 month ago

☝️ PSA: Accessing this.children in web components may get you different results depending on the HTML structure. Tunneling everything through <slot> and reacting to slotchange events (or MutationObserver for the depraved) is annoying, but not as much of a footgun.

#javascript #webdev #webcomponents

1 1 1 0

Веб-стандарты

@web-standards.ru

1 month ago

Фото автора рядом с заголовком «Reference Target: having your encapsulation and eating it too», в центре фрагмент кода и внизу морские волны.

Reference Target: и волки сыты, и инкапсуляция цела. Элис Боксхолл представляет предложение, где элемент в shadow DOM становится целью, когда ссылаются на хоста, сохраняя инкапсуляцию. Chromium, WebKit и Firefox уже внедрили ранние прототипы. #webcomponents #a11y

blogs.igalia.com/alice/refere...

0 0 0 0

Anthony Quinn

@antquinn.bsky.social

1 month ago

Anyone out there used WebAwesome or UntitledUI in a project? Wondering what your experience and thoughts are if you have?.
#html #webcomponents #css #designsystem

0 0 0 0

Egor Kloos

@dutchcelt.com

1 month ago

No config responsive menu A Responsive Menu using slots for overflow. This uses slots for "moving" and thus avoids the need to alter the DOM directly with JavaScript. Also, with...

Do you want a dynamic, responsive navigation?
What if you want zero config, no DOM manipulation, no attributes popping up?
Well, slot assignment, popovers, and anchor positioning, you can get it done. Okay, that's a lot. But, doable.

#CSS #webcomponents #customelements

codepen.io/dutchcelt/fu...

3 2 2 0

westbrook

@westbrook.mastodon.social.ap.brid.gy

1 month ago

MSEdgeExplainers/PlatformProvidedMixins/explainer.md at main · MicrosoftEdge/MSEdgeExplainers Home for explainer documents originated by the Microsoft Edge team - MicrosoftEdge/MSEdgeExplainers

Platform-provided Behavior Mixins you say?!? 😲

github.com/MicrosoftEdge/MSEdgeExpl...

What do you think? 👂

#webDev #webComponents #webComponentsCG #developingDesignSystems #w3c

2 0 1 0

Marco Otte-Witte

@marcoow.bsky.social

1 month ago

We’re seeing more and more teams adopt multi-framework architectures with #emberjs, #react, #svelte, #vuejs, or #webcomponents mixed together in one big system. @nickschot.bsky.social wrote about some learnings from a recent project in which @mainmatter.com helped a client integrate Ember.js+React.

2 1 0 0

AgnosticUI

@agnosticui.bsky.social

1 month ago

AgnosticUI Docs Show SelectionButtonGroup component

🚀 New in AgnosticUI: SelectionButtonGroup & SelectionCardGroup

Just shipped two components while building our Onboarding Playbook!

✨ SelectionButtonGroup
Compact button-styled radio/checkbox

✨ SelectionCardGroup
Rich card-based selection

#WebDev #React #Vue #Svelte #WebComponents #OpenSource

1 0 1 0

Web Standards

@web-standards.dev

1 month ago

Sketch of the author’s face next to the headline “How to dynamically install custom elements”, with panels showing a JS file tree, custom elements, and JavaScript code.

How to dynamically install custom elements. @heydonworks.com uses :not(:defined) plus dynamic import to load only the custom elements found in the DOM, with a ready event and a MutationObserver option for late additions. #js #webcomponents

heydonworks.com/article/dyna...

4 1 0 1

Frontend Dogma

@frontenddogma.com

1 month ago