Composability

[fractaledmind]

I really like the direction you are thinking here. I have been thinking in very similar directions recently, but I am coming from a Stimulus.js background (https://stimulus.hotwired.dev). One of my favorite features of Stimulus.js is the fact that "behaviors" can be composed onto the same sub-tree of the DOM. Custom elements currently 1-to-1, not N-to-1. Have you started exploring how you might support composable behaviors? For example, <ul is="sortable collapsible">. I personally find this much clearer and truer than something like:

<sortable>
  <collapsible>
    <ul>
    </ul>
  </collapsible>
</sortable>

[ChrisShank]

Hi @fractaledmind! Ya this is a great pattern, we should definitely document it!

I’m not sure if you’re aware but there is some renewed discussions of standardizing “custom attributes” in browsers! https://github.com/WICG/webcomponents/issues/1029

other implementations that i know of include

• https://github.com/matthewp/custom-attributes
• a maintained fork https://github.com/lume/custom-attributes

what’s nice is that custom elements and custom attributes aren’t mutually exclusive!

What im currently exploring is how custom elements can be used as controllers for parts of the DOM. So the ability to get a reference to it, imperatively interact with it, and for it to reflect state into the DOM for conditional styling. Maybe that highlights some differences between the two?

[fractaledmind]

Yeah, I saw that discussion and I hope it progresses. More generically, maybe my thought is that custom attributes are an important mechanism for being controllers for parts of the DOM, since they compose. Some problems are solved well with custom elements that don't need to compose with anything else; other problems are solved well with composable custom attributes. If you have never checked out Stimulus, I'd recommend giving that handbook a read through. It provides "custom-attribute-driven DOM controllers" precisely, and I've used it for years and really like it. But, as with most things, it does things that I don't want or need in addition to this amazing core, so I've also been exploring how to provide lightweight, minimally abstracted DOM controllers, but I default to wanting to reach for custom attributes instead of custom elements because I've composed so many Stimulus controllers in my years building web apps.

[ChrisShank]

Started playing around with custom attributes on another side project, might port it back to this one!

https://github.com/Little-Languages/boundless-canvas/blob/main/src/base-element.ts