Latest posts tagged with #webComponents on Bluesky
#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...
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
☝️ 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
Фото автора рядом с заголовком «Reference Target: having your encapsulation and eating it too», в центре фрагмент кода и внизу морские волны.
Reference Target: и волки сыты, и инкапсуляция цела. Элис Боксхолл представляет предложение, где элемент в shadow DOM становится целью, когда ссылаются на хоста, сохраняя инкапсуляцию. Chromium, WebKit и Firefox уже внедрили ранние прототипы. #webcomponents #a11y
blogs.igalia.com/alice/refere...
Anyone out there used WebAwesome or UntitledUI in a project? Wondering what your experience and thoughts are if you have?.
#html #webcomponents #css #designsystem
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...
Platform-provided Behavior Mixins you say?!? 😲
github.com/MicrosoftEdge/MSEdgeExpl...
What do you think? 👂
#webDev #webComponents #webComponentsCG #developingDesignSystems #w3c
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.
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
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...
The Missing Link for Web Components, by @kinoauge@mastodon.social (@frontendmasters.com):
frontendmasters.com/blog/the-missing-link-fo...
#webcomponents #typescript #json #mcp #ai
#Development #Approaches
Anti-frameworkism · When to choose native web APIs over frameworks ilo.im/169luf by Anna Monus
_____
#JavaScript #Frameworks #React #AI #WebComponents #SSR #APIs #Browsers #WebDev #Frontend
body:has(:not(:defined)) { opacity: var(--wc-loaded, 0); animation: showBody 0s linear 100ms forwards; } @keyframes showBody { to { --wc-loaded: 1; } }
I've been having fun with improving this FOUC solution for #WebComponents. Thank you, everyone, for the feedback!
I've improved upon it.
