Veganism Social

1 post1 participant0 posts today

Vincent AgnanoLegoJs v1.9.0 is out with more simplicity and more modern <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> to write <a href="https://mastodon.social/tags/native" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#native</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> 🚀 <a href="https://github.com/Polight/lego/pull/37#issuecomment-2803062579" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/Polight/lego/pull/37#issuecomment-2803062579</a>Documentation will follow.<a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/svelte" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svelte</a> <a href="https://mastodon.social/tags/alternative" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#alternative</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/templating" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#templating</a> <a href="https://mastodon.social/tags/rendering" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#rendering</a>

Peter KrönerCircumstances have conspired to make me build and release a flexible web component to toggle dark/light mode:📦 <a href="https://www.npmjs.com/package/@sirpepe/dark-mode-toggle" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.npmjs.com/package/@sirpepe/dark-mode-toggle</a> 💾 <a href="https://github.com/SirPepe/dark-mode-toggle" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/SirPepe/dark-mode-toggle</a><a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

JWSGeekI'm in total agreement with this post: <a href="https://gomakethings.com/the-shadow-dom-is-an-antipattern/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://gomakethings.com/the-shadow-dom-is-an-antipattern/</a> - 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.<a href="https://universeodon.com/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://universeodon.com/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://universeodon.com/tags/shadowdom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shadowdom</a>

Peter KrönerOrnament 3.0.1: one less <a href="https://mastodon.social/tags/TypeScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TypeScript</a> annoyance 🫠 <a href="https://www.npmjs.com/package/@sirpepe/ornament" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.npmjs.com/package/@sirpepe/ornament</a><a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

JonWhat is the most modern and bestest lightweight barcode reader (just the regular kind of barcodes, no need for anything fancy) <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/typescript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typescript</a> <a href="https://mastodon.social/tags/browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#browser</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Guides</a> Simplify sharing · How to make content sharing effortless on your website <a href="https://ilo.im/16350b" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/16350b</a>_____ <a href="https://mastodon.social/tags/Sharing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Sharing</a> <a href="https://mastodon.social/tags/Content" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Content</a> <a href="https://mastodon.social/tags/Webpage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Webpage</a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ProgressiveEnhancement</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

MaartenSuch 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 <a href="https://mastodon.workingweb.nl/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

Peter Kröner📦 Ornament 3.0: <a href="https://www.npmjs.com/package/@sirpepe/ornament" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.npmjs.com/package/@sirpepe/ornament</a>Had to fix a few API brain farts, which means breaking changes, which means a major release with next to zero material changes. Semver 🙄 <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Pitfalls" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Pitfalls</a> The burden of custom form validations · When over-engineered form validations backfire <a href="https://ilo.im/16327e" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/16327e</a>_____ <a href="https://mastodon.social/tags/Form" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Form</a> <a href="https://mastodon.social/tags/Validation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Validation</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Browser</a> <a href="https://mastodon.social/tags/Library" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Library</a> <a href="https://mastodon.social/tags/Framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Framework</a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://mastodon.social/tags/DesignSystems" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DesignSystems</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Burton SmithIs 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.<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>

mbrambillaBuilt my first web component. Create image placeholders. Might not be the best implementation, but I am happy with it. Check it out. Feedback welcome!<a href="https://github.com/shadeweave/sw-image" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/shadeweave/sw-image</a><a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a>

Frontend DogmaWeb Components vs. Framework Components: What’s the Difference?, by @thedocwhocodes@x.com (<a href="https://mastodon.social/@smashingmag" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@smashingmag</a>):<a href="https://www.smashingmagazine.com/2025/03/web-components-vs-framework-components/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.smashingmagazine.com/2025/03/web-components-vs-framework-components/</a><a href="https://mas.to/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://mas.to/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mas.to/tags/frameworks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frameworks</a> <a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mas.to/tags/comparisons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#comparisons</a>

westbrookSo…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: <a href="https://preview.reve.art/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://preview.reve.art/</a> 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?<a href="https://mastodon.social/tags/webComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webComponents</a> <a href="https://mastodon.social/tags/aiArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#aiArt</a> <a href="https://mastodon.social/tags/photography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#photography</a> <a href="https://mastodon.social/tags/shoelaceStyles" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#shoelaceStyles</a> <a href="https://mastodon.social/tags/creativity" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#creativity</a> <a href="https://mastodon.social/tags/justTheBeginning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#justTheBeginning</a>

Burton SmithToday, I'm excited to release the CEM Validator for your <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a>!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<a href="https://wc-toolkit.com/cem-utilities/cem-validator/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://wc-toolkit.com/cem-utilities/cem-validator/</a>

Kito D. MannThanks to everyone who came to my "Future-proof your Web Apps with <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> and <a href="https://mastodon.social/tags/Lit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Lit</a>" talk at <a href="https://mastodon.social/tags/Frontrunners" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontrunners</a> (<a href="https://frontrunners.tech" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontrunners.tech</a>)! You can find the mindmap and demo code here: <a href="https://kitomann.com/#/sessions/14/future-proof-your-web-apps-with-web-components-and-lit" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitomann.com/#/sessions/14/future-proof-your-web-apps-with-web-components-and-lit</a> . <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/typescript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typescript</a>

Brandon Zhang 🇨🇳<a href="https://nullptr.rehab/@voyd" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@voyd</a> That’s horrible. Maybe try <a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> based UI components?

Chris SmithIf 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.<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://mastodon.social/tags/customelements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#customelements</a>

Kito D. MannI'm looking forward to speaking about <a href="https://mastodon.social/tags/lit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lit</a> and <a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> 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! <a href="https://frontrunners.tech/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontrunners.tech/</a>.

Christian Martin Nies<a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> Solution: Do not push to the array, but rather add it. document.adoptedStylSheets.push(yourStyleSheet) does not workdocument.adoptedStyleSheets = [...document.adiptedStyleSheets, yourStyleSheet] does.So, yes we can use it also in older browsers, who give a false positive…

Christian Martin Nies<a href="https://mastodon.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> 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.

Recent searches

Search options

Administered by:

Server stats:

#webcomponents