Post

From time to time I want to see if Web Components improved They could have been way better if we started with a simple partial defined using the <template> tag and a name attribute <template name="user-item"> some html here </template> Then you do `<user-item>` and the browser inline the partial

To add scoped styles we could make it so any <style> or <link rel="stylesheet"> inside a <template> is automatically scoped to that partial <template name="user-item"> <link rel="stylesheet" href="/styles/user-item.css" /> some HTML here </template> Something like that ☝️

To add interactivity, we could also load a JS file inside the template If this JS has an `export default` with a class extending HTMLElement the browser could automatically instantiate it with a reference to the partial DOM reference to let you add events or manipulate it

Pair all of that with import maps and we could have HTML partials, scoped styles and JS files for WC cached forever And because it starts with HTML instead of JS like WC it could go from something super simple to avoid repetition to a more advanced component Like a Progressive Web Component API