I've just started learning #webComponents and oh my days there seems to be a lot of ways to boilerplate this. Should I just use #Lit? It looks like I'd need a bundler which seems overkill for my tiny #11ty site.
Sharing another Web Component today. This is the one that kinda sparked things off for me to create small, but useful, #WebComponents that I would benefit from and maybe others too.
I wanted to utilise the :playing pseudo selector to style elements when an audio element is playing, but it's only available in Safari. So I made a Web Component: https://darn.es/is-playing-web-component/
One important piece is declarative shadow DOM. It enables better server-side rendering and UIs that work without JavaScript. It’s now supported by Chrome and Safari, but not by Firefox.
What is still missing? I remember reading that accessibility was an issue in some cases. Is that still true?
How would you handle doing a (progressive enhancement) web component that needs to handle a click event, but the underlying element it wraps also needs to handle that click event to do something different in the event that the user agent doesn’t support custom elements?
So, a button with an event handler wrapped in a custom element that progressively enhances the click event to do better stuff if supported.
Been digging this idea of simple practical native HTML #WebComponents because sometimes you just need to drop in a little functionality. I built a component for easily sorting and filtering tables. https://colinaut.github.io/action-table/
New addition to my #WebComponents collection: <mastodon-post>!
Embed mastodon posts on your web pages by progressively enhancing a regular link and without the need for an <iframe>. Use the built in semantic template or apply your own! Read more about it here: https://darn.es/mastodon-post-web-component/