Post

I love building custom elements but quickly end up with a deep DOM when keeping them small and nesting, also you often have to code with this nesting specifically in mind.

Custom attributes will be great for keeping things more composable. I’d estimate 8/10 custom elements I write could (and should) be custom attributes.

For sure and also all these "data-something" attributes are so confusing. I can not remember projects where I used them at all. Every framework which uses them, struggle to gain popularity. And those who ignore recommendations and use their own attributes strive

Plus data attributes don't offer any API for lifecycle methods (like custom elements do, and custom attributes should), so you end up writing your own mutation observer which is no fun 🤢

I like the idea in general but I’m curious how it would pair with SSR. Lack of support for that was a big bugbear with Custom Elements and while we’ve arrived at a solution there I’m not sure how you’d ever do it for attributes. (maybe it just doesn’t and we accept that fact upfront!)

Before this feature I'd like declarative fetching of custom elements. The browser loads <my-element> only when it discovers it in the dom. Eliminate all the custom-built loaders with web standards. Maybe something for importmap 'my-element': 'http://' or a new attribute on the script tag 'on-demand'

Re: controversies around messing with DOM classes - the method for registering a new attribute could accept a declaration that you want to create an implicit subclass. I'd be eternally grateful if implicit subclassing worked such that all children of that node would also only use the subclass.

I would like to extend svg <path> with generator attributes. Like <path star-radius="10" star-count="5" /> to generate a start shape in the d attribute. Or a boolean operation attribute for a <g> to emulate the behaviour we know from Figma and Sketch.

Yes! When I first learned about web components, the "is" attribute made the most sense for how I'd use them most of the time. I still think that, but because Webkit won't implement it, I've gotten used to workarounds. Custom attributes seem as good as "is" (and maybe better?). Would love to see it.

I really like this as an enhanced way to handle and distribute attribute behavior on Custom Elements. I wouldn't open this to existing element classes honestly.

🙁 In my projects I usually use a Mutation Observer which recursively listens on the root node, that uses a target.matches() to decide if and how to initialize elements in the DOM. And that seems to do the job quick enough.

I don't think this should be related to attribute nodes at all and yeah I think the prop versions should be exposed on the HTMLElement prototype (or maybe Element, would this work on SVG or MathML elements?) since that's what frameworks expect