Dynamic Input does not handle "class" and "style" attributes the same way it does when they are hardcoded

[trg]

New Feature

Description

When using dynamic input attributes such as the example in the doc: https://markojs.com/docs/syntax/#dynamic-attributes

<a ${myDynamicInputObject} target="_blank">eBay</a>

The special processing that is done to the class and style when those attributes are an object is ignored by helper-attrs. If myDynamicInputObject above has a class or style key, I'd expect Marko to process that attribute as it does if it was hardcoded.

Why

The only way to deal with dynamic style or class attributes is a workaround like this:

$ const myDynamicInputObject = { style: "color: red", data-custom: "bar" };
$ const myStyle = myDynamicInputObject.style;
$ delete myDynamicObject.style;
<a style=myStyle ${myDynamicInputObject} target="_blank">eBay</a>

Possible Implementation & Open Questions

Assuming no circular dependencies, adding a check above here for these special inputs may be a fix: https://github.com/marko-js/marko/blob/master/src/runtime/html/helper-attr.js#L18

I wanted to touch base here though in case there's a reason that class / style are being serialized if the input is dynamic.

Is this something you're interested in working on?

Yes

[DylanPiercey]

@trg because changing this right now could potentially break things for users relying on passing style and class as is we can revisit this change when we are ready for a Marko 5 release. Thanks for creating the issue and we'll let you know when we are closer to a new release.

[mlrawlings]

Fixed in 4.11 (without breaking since we only target HTML elements)