Modify attributes with JavaScript

[kris-ellery]

I like the idea and been playing with it multiple times before. However, always had issues with modifying attributes using JavaScript. Setting or removing attribute nukes its value, unless you have additional methods that might use regex to allow to modify multiple values per attribute. Plus, no toggle support.

It would be nice if we could have:

element.addAttr('am-Button', 'red large rounded'); // add 3 values to single attribute
element.removeAttr('am-Button', 'large'); // remove single value
element.toggleAttr('ui-state', 'disabled'); // toggle value

Thoughts?

[geelen]

That's exactly the behaviour of the ClassList api: https://developer.mozilla.org/en-US/docs/Web/API/Element.classList

So it's probably not worth trying to use attributes for toggling states like this - AM works because you the attribute defines what object an element is (like am-Button) and the value defines its variant (like red large rounded). So it wouldn't be the normal case for an element to change object or variant. State, however (like disabled), might change a fair bit, so using classes and classList would probably be the way to go.

The times I've had to do it, I've used angular: e.g. <div am-Button="{{ buttonVariant }}" ui-state="{{ buttonState }}"

[kris-ellery]

Right, that's my point. JavaScript already has functionality to modify classes dynamically, which makes it really easy to update UI by toggling classes. In example toggling is-active state on a modal or off-canvas element. In general AMCSS approach is not JavaScript friendly.

[geelen]

Yep, I agree. It's not designed to be JavaScript friendly - it's about capturing the styling information of your elements in the most meaningful way, and that information is less likely to need to change with JS. You can always use AMCSS for the stuff that doesn't change and use classes like is-disabled or is-active to capture state.