Comment by nymanjon

I built a simple lib for JS/HTML called html-traits[1]. It's similar to built-in web components but instead of using the `is` attribute you use the `traits` attribute. So, it is specifically meant for progressive enhancement. Let's say I have a `textarea` element and I want it to have the behavior where the text box expands automatically, I would add a trait called "expando" that would do that for me. But let's say I also want it to turn red when there's more than 200 characters entered, so I could add another trait called "character-limit" with an added attribute `data-character-limit="200"`.

So, the element works like normal if no JS is enabled or if the JS broke for some reason, but it has those extra behaviors when JS is working. And it is very clean as it is just attributes on the element rather than having nested element hell like when you are using normal web components, or worse, like when you have web components which don't even show the `textarea` element at all and they put it in the shadow DOM and the developer has to reimplement all the behavior of the original element.

So, composition over inheritance.

[1]: https://github.com/jon49/html-traits