“<calc-input>”, a Custom Input Element That Accepts Mathematical Formulas, by @[email protected]:
@frontenddogma.com
@frontenddogma.com“<calc-input>”, a Custom Input Element That Accepts Mathematical Formulas, by @[email protected]:
@iamkulykov.bsky.socialNew series: A11y Memoirs!
My stories from years of building accessible web components at @vaadin.com.
Episode 1 is about vaadin-button: Shadow DOM, focus, tooltips, screen reader issues and lessons learned.
@inautilo.bsky.social#Design #Launches
Amazing Glass · Liquid glass web components for HTML, React, and Vue ilo.im/16gps7 by Iván González
_____
#LiquidGlass #Effects #Design #WebDesign #WebComponents #HTML #React #Vue #WebDev #Frontend
@stuffbreaker.bsky.socialCalling all fellow web devs, design engineers, and web components nerds!
Would you be interested in a #WebComponents conference??? Let us know!
@lionel-peramo.comShadow DOM no longer requires JavaScript.
You can now write it directly in HTML (Part 2).
It uses a template tag with shadowrootmode=open.
The browser creates the shadow root during HTML parsing.
No client-side script is needed to display it.
1/3
@iamkulykov.bsky.socialVaadin web components now have #a11y statement published on GitHub! Check it our to learn how we develop and test our design system based on the set of accessible #WebComponents built with Lit @lit.dev
@lionel-peramo.comComponent styles break easily in large projects.
The shadow DOM solves this natively.
It encapsulates HTML and CSS inside a component.
It creates an isolated DOM tree attached to a host element.
Global styles cannot enter or break this tree.
1/3
@stuffbreaker.bsky.socialOkay, here's some more fun with CSS-only custom elements - layout components!
@mikejeff.comAs a perpetual web components beginner, I found this article very helpful.
@fndriven.eurosky.socialfn-wikipedia-search
A web component to search Wikipedia
@coryrylan.com
@interesting.bookmarks.kvibber.com.ap.brid.gy**How Firefox renders web components**
"How Firefox turns a custom element into pixels, traced through Gecko's own source, from the registry to the reactions stack to the flattened tree Stylo styles."
@sirpepe.bsky.socialTIL: the #CSS & nesting selector is equivalent to :is() and therefore does not work with pseudo elements - in my #webcomponents case, ::part()
@jbasoo.bsky.socialI just updated our hiring process component with some tasteful animations using #WebComponents & modern #CSS (scroll-driven animations, style queries, anchor positioning).
We're especially looking for documentation engineers right now but have other eng roles too!
@jbasoo.mastodon.social.ap.brid.gyI just updated our hiring process component with some tasteful animations using #WebComponents & modern #CSS (scroll-driven animations, style queries, anchor positioning).
https://www.storyblok.com/jobs?query=engineer
We're especially looking for documentation engineers right now but have […]
@bytejournal.bsky.social🚀 Dive into Lit Framework—fast, lightweight web components! See how open‑source power and the OpenJS Foundation boost your dev game. #LitFramework #OpenSource #WebDevelopment #JavaScript #WebComponents 🔗
@jgauffin.bsky.socialHow relaxjs works, and why agents know it's core better than any larger web framework.
@stuffbreaker.bsky.socialLately, I've been exploring CSS-only custom elements. They're pretty rad!
@mspk-97.bsky.socialStruggling with screen readers ignoring your Shadow DOM components? Learn how the accessibility tree works and practical fixes like delegatesFocus and ARIA roles to bridge the gap. Make your web components truly accessible. #Accessibility #ShadowDOM #WebComponents #ScreenReaders https://blog.mspk.me
@stuffbreaker.bsky.socialA few months ago someone asked what I think a Custom Elements Manifest generator should look like.
Here's my first pass at it. The goal was to make it light weight and easy to use.
It's still in the early stages, but let me know what you think.
