#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
Recent searches
Search options
#WebComponents
4 posts4 participants0 posts today
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.
Noctua Technology and myself just release v1 of our web component implementation of the USWDS. I have been wanting to do this for a long time and i hope to contribute more back to the core project.
uswds.noctuatech.comNoctua Technology, Inc. | Custom USWDS Implementation for Government WebsitesNoctua Technology offers a tailored USWDS implementation that optimizes performance, accessibility, and flexibility for government websites. As active contributors to the USWDS project, we support ongoing improvements and ensure alignment with industry standards.
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
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.
gomakethings.comThe Shadow DOM is an antipatternIn my video on building a modern web app with vanilla Web Components, I mentioned that I believe the Shadow DOM is an antipattern when using Web Components.
I had a few folks in the comments ask me why.
After all, the Shadow DOM is touted as one of the premiere features of working with Web Component. And certain features, like slots, require the Shadow DOM to work.
I’ve built a lot of Web Components over the last couple of years, and in my experience, the Shadow DOM creates more problems than it fixes.
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.
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.
Web Component Base (WCB) by Ayo Ayco (@ayo) | https://ayos.blog/wcb/
Ayo's Blog · Web Component Base (WCB)A simple reactivity system for Web 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?
preview.reve.artReve: Bring your ideas to lifeBring your ideas to life with Reve.Art
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
Web Components ToolkitCustom CEM TypesTypes to make working with custom data in the CEM easier
In the DC area or close by? Come see my session "Future-proof your Web Apps with #WebComponents and #Lit" at #Frontrunners next Friday, March 21st. https://frontrunners.tech/ #typescript #javascript
frontrunners.techFrontrunners
Today, I'm excited to roll out the #webcomponents lazy loader tool!
This is great for environments where teams need to be able to drop in a <script> tag and begin building. The tool only loads what's on the page and progressively loads more as the page content changes. Other features include:
Eager loading Dependency configuration Tag scoping Reduced FOUC settings Runtime configuration Ability to extend the component list
#html #css #javascript #webdev
https://wc-toolkit.com/adoption/lazy-loader/
Web Components ToolkitLazy LoaderA tool for generating an entry point for lazy-loading custom elements/web components.
Last Thursday I have one engineer talk about ssr & web components at the AmsterdamJS meetup. Click-baity title, but I promise we tried to give the full picture. :)
Has anyone come across any #js lib that helps wire up points (times) in a video to functions? I'm probably going to roll my own, but just wondering if there is any good prior art. The task I have been set is to connect docs and videos together to form sort of tutorial content.
Really like this approach of using a few focused features to create a workable solution for creating custom elements.
https://github.com/JimSchofield/minne
GitHubGitHub - JimSchofield/minne: An ultra-light web component frameworkAn ultra-light web component framework. Contribute to JimSchofield/minne development by creating an account on GitHub.