Very clear pattern forming in a few of my #WebComponents, creating a <template> element outside of the component code itself for reduced repetition and performance. I'm effectively polyfilling for Declarative Shadow DOMs inability to be defined once for many instances. Though I guess I'm also polyfillnig for a lack of “Declarative Light DOM" too 🤔
One of the teams I've been working with to climb the performance management maturity ladder is...Edge!?!
We build a lot of the browser out of web "stuff" these days (think bookmarks, history, downloads, settings, new-tab-page, etc.), and moving away from React to a modern Web Components + HTML-first architecture has had a huge benefit for users, particularly folks on low-end hardware:
A Web Component for filtering items using a text input. Made this for a friend a while back and thought I should wrap it up into a neat package to go alongside my other #WebComponents.
The discussion over on a thread by @chriscoyier spurred me to respond in the form of a blog post (and also finally add the seventh installment of the web component series I started in December).
I talk about how building dependency-free #WebComponents that last a life time does not have to mean a bad developer experience.
I know he didn't explain his position in details, so a 1800-word article sounds a little unfair, but I think dry and sharp statements need adequate context and analysis.
"The random-source Web Component allows you to cycle randomly through different audio or video sources, utilising existing HTML elements and providing an elegant fallback experience.”
Enjoy insights from 22K responses about the state of the web platform, from HTML and interactivity to #webcomponents, PWAs, and a lot more.
This project is a monumental effort from people across the world. We even designed novel data collection UIs to gather the data we needed while minimizing friction, which I plan to write a case study about soon.
More ways to instantiate #WebComponents: "Last week, we looked at different ways to setup the HTML in a Web Component. One of the challenges with running your code in the constructor() is that sometimes the custom element is created, but none of the nested HTML inside it is ready yet. We looked at a few different ways to fix that, but today, I wanted to share two more. Let’s dig in!" https://gomakethings.com/more-ways-to-instantiate-web-components/