Circumstances have conspired to make me build and release a flexible web component to toggle dark/light mode:

https://www.npmjs.com/package/@sirpepe/dark-mode-toggle
https://github.com/SirPepe/dark-mode-toggle

I'm in total agreement with this post: https://gomakethings.com/the-shadow-dom-is-an-antipattern/ - the ability to have a global CSS system is something that has been encouraged for YEARS as a matter of reducing the download footprint, yet shadow dom discourages this.

And there shouldn't be any technical reason why slots should require shadow. take this declared child, move it to that spot in my html structure. It can be (and has been) faked by multiple frameworks including lit, stencil, and JET.

'generic' web components that use internal CSS to define the layout, and then rely on a global css system to be flexible in appearance, is what we web-devs really want.

Ornament 3.0.1: one less #TypeScript annoyance

https://www.npmjs.com/package/@sirpepe/ornament

What is the most modern and bestest lightweight barcode reader (just the regular kind of barcodes, no need for anything fancy) #javascript #typescript #browser #WebComponents

#Development #Guides
Simplify sharing · How to make content sharing effortless on your website https://ilo.im/16350b

_____
#Sharing #Content #Webpage #ProgressiveEnhancement #WebComponents #WebDev #Frontend #HTML #CSS #JavaScript

Such a weird issue where an input is slotted locally but when I put it on the server it’s not so my styles aren’t applied #webcomponents

Ornament 3.0: https://www.npmjs.com/package/@sirpepe/ornament

Had to fix a few API brain farts, which means breaking changes, which means a major release with next to zero material changes. Semver

#Development #Pitfalls
The burden of custom form validations · When over-engineered form validations backfire https://ilo.im/16327e

_____
#Form #Validation #Browser #Library #Framework #WebComponents #DesignSystems #WebDev #Frontend #HTML

Is there a CSS equivolent to JSDoc? It would be really nice to co-locate my docs next to my CSS variables in my web components.

Built my first web component. Create image placeholders. Might not be the best implementation, but I am happy with it. Check it out. Feedback welcome!

https://github.com/shadeweave/sw-image

Web Components vs. Framework Components: What’s the Difference?, by @thedocwhocodes@x.com (@smashingmag):

https://www.smashingmagazine.com/2025/03/web-components-vs-framework-components/

So…whether you like generative images or not (heck, I’m not sure if I like generative images, especially not this way) we made a thing at my new(-ish) gig: https://preview.reve.art/ It’s the ways of making images AFTER this first foray that I’m most excited about, but “any sufficiently complex system…”. Check it out as you will and share what you’re able to bring to live?

Today, I'm excited to release the CEM Validator for your #webcomponents!

This is designed to be an automated check before your components go to production. I know there is a ton of stuff that can be added to this, but I decided to start small. Features include:

package.json validation
module and definition path validation
a check to ensure you are exporting all types for your APIs
a check to make sure the tag name is present for your components

https://wc-toolkit.com/cem-utilities/cem-validator/

Thanks to everyone who came to my "Future-proof your Web Apps with #WebComponents and #Lit" talk at #Frontrunners (https://frontrunners.tech)! You can find the mindmap and demo code here: https://kitomann.com/#/sessions/14/future-proof-your-web-apps-with-web-components-and-lit . #javascript #typescript

If you build a custom element and it uses a child element with a CSS shadow part to expose its base styling, e.g. ::part(base), then this will be ignored if the custom element has content-visibility: auto.

So, if you want cards with box-shadow, the shadow styling has to be on the custom element itself, or :host, not the ::part() pseudo selector.

I'm looking forward to speaking about #lit and #webcomponents at the Frontrunners conference on Friday, March 21st in Washington, DC. It's a nice, one-day event. If you're local, check it out! https://frontrunners.tech/.

#webcomponents Solution: Do not push to the array, but rather add it.
document.adoptedStylSheets.push(yourStyleSheet) does not work

document.adoptedStyleSheets = [...document.adiptedStyleSheets, yourStyleSheet] does.

So, yes we can use it also in older browsers, who give a false positive…

#webcomponents Just in case someone out there is in a similar situation of using adoptedStyleSheets and CSSStyleSheets in older browsers and using the great polyfill. If it does not kick-in, it MIGHT be, that chrome and safari implemented and rolled it out back in the days with frozen array.

Hey all, I’m back with another article! This one has been a long time coming. My thinking here is definitely still evolving and, as always, I’d love to hear your feedback
#css #designsystems #webcomponents
https://jwdallas.com/posts/styleapisasalastresort/