Neat, you can cause too much recursion with nothing but (non-declarative) Shadow DOM
Recent searches
Search options
#webcomponents
6 posts5 participants0 posts today
Using #PodOS elements you can access data on #Solid pods without writing a single line of JavaScript. It's as easy as writing #html thanks to #WebComponents!
Check out the quick start guide:
https://github.com/pod-os/PodOS/tree/main/elements#quick-start
GitHubPodOS/elements at main · pod-os/PodOSPersonal Online Data Operating System. Contribute to pod-os/PodOS development by creating an account on GitHub.
Last year All Day Hey! from @heypresents gave me the surprise opportunity to speak about my passion for #WebComponents and #DesignSystems. It was such a great experience that I went and spoke at a further three conferences 
There’s still tickets if you can make it to Leeds next week 
heypresents.comAll Day Hey! 2025A curated single-track conference for developers, designers, and technology leaders.
Hello #FediVerse - The dedicated account for #Teskooano is live!
What is Teskooano you say? It's a web-based #3dEngine made with #threeJS and #webComponents to display N-Body systems. https://teskooano.space
It's buggy, still a lot of work to do - but it's already up for you to try out - it's also a #mobile friendly #pwa you can install and use offline!
GIF
Here's a new addition to the WC Toolkit - the Changelog. It compares two versions of a Custom Elements Manifest to let you know what changes were introduced between versions of your #webcomponents library.
Web Components ToolkitChangelogA tool to detect changes between two version of a web component package using the Custom Elements Manifest.
#Development #Pitfalls
All browsers get this wrong · What DevTools misinterpret about Shadow DOM https://ilo.im/163dax
_____
#Bugs #Specification #WebComponents #ShadowDOM #DevTools #Browser #WebDev #Frontend #DOM #CSS
Another #Teskooano release today - I've done another bunch of performance improvements, UI improvements and added a couple of new features (like import/export JSON)
It's also now an offline-only #pwa - you can install it, go offline and it works perfectly as it has no backend dependencies - it's fully #procedural
Did a big UI refactor for 
Teskooano today - now it's a lot more responsive, and big performance gains.
GIF
Teskoanno is now live! My #threejs powered 3D N-Body simulator is now up - it's a dev build, and not optimised but it works! I tested it on mobile - UI needs to work, but runs well on my Pixel 8 Pro.
Would love to get #feedback
https://tanepiper.github.io/teskooano/
#gamedev #astronomy #webDev #webComponents #vanillaJS #opensource
(Bonus debug tools screenshot)
JSX-Syntax with Webcomponents.
https://positive-intentions.com/blog/dim-functional-webcomponents
I made something to try out and I'm working towards a UI framework for my personal projects. It's far from finished but perhaps this might be interesting to share.
positive-intentions.com · Dim: Functional Web Components | positive-intentionsModern JavaScript frameworks like React JS and Vue JS have popularized the functional programming paradigm and declarative approaches to web app development. While these frameworks have made creating dynamic web applications more accessible, it's worth exploring the potential of web components in this landscape. Lit elements, with its minimalistic and declarative approach, stands out as an appealing base for leveraging web components in modern web and app development.
LegoJs v1.9.0 is out with more simplicity and more modern #JS to write #native #webcomponents 
https://github.com/Polight/lego/pull/37#issuecomment-2803062579
Documentation will follow.
GitHubProofreading the docs... by mlbiche · Pull Request #37 · Polight/lego
The Case for Web Components With Lit, by (unattributable):
https://typescript.guru/the-case-for-web-components-with-lit/
TypeScript.Guru · The Case for Web Components with LitHey there! Take a seat, grab a coffee, and let's chat about Web Components. Whether you're new to them or just need a refresh, they offer a powerful, framework-agnostic way to build reusable UI. In this article for TypeScript.guru, we'll explore how Lit simplifies the creation of Web Components—
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
npm@sirpepe/dark-mode-toggleA web component for switching between light and dark modes. Latest version: 0.1.1, last published: 3 hours ago. Start using @sirpepe/dark-mode-toggle in your project by running `npm i @sirpepe/dark-mode-toggle`. There are no other projects in the npm registry using @sirpepe/dark-mode-toggle.
Ornament 3.0.1: one less #TypeScript annoyance 
GIF
What's the best way to provide default styles for a web component?
like: most web components do have `display: inline` but sometimes a display: block; would be better.
I guess my approach would be to never set any styles at all in the JS and say: the defaults are what the user agent gives you. But I did wonder if I can say somehow: "this element is a block element and not an inline element", without having a FOUC (Flash of Unstyled Content). #WebComponents
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
PiccalilliSimplify sharing with built-in APIs and progressive enhancementInstead of leaning into heavy social sharing widgets, you can create a truly user-friendly social sharing component that works for everyone, using built-in APIs and progressive enhancement.
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 
npm@sirpepe/ornamentMicro-library for building vanilla web component frameworks. Latest version: 3.0.0, last published: 3 days ago. Start using @sirpepe/ornament in your project by running `npm i @sirpepe/ornament`. There are 3 other projects in the npm registry using @sirpepe/ornament.
Has anyone created a WebComponents-powered data viz library? #WebDev #WebComponents