Svg.Attributes.style not consistent with Html.Attributes.style

[jhrcek]

There is a discrepancy in how elm-lang/html and elm-lang/svg packages work with style attribute. This attribute is declared with different types in each package:

Html.Attributes.style : List (String, String) -> Attribute msg
versus
Svg.Attributes.style : String -> Attribute msg

This is not problem per se. What I find problematic though is that when multiple style attributes are present the list of attributes of one element, in Html the styles are combined, whereas in Svg the "last one wins". See the following code fragment on ellie for illustration of the issue.

This typically causes problems when you have reusable view function and want to provide additional attributes like so:

myWidget : List (Attribute msg) -> Svg msg
myWidget additionalAttributes = ...

Wouldn't it make sense to unify this and have Svg.Attributes.style have the same type and behavior as Html.Attributes.style?

See an example fix I had to do in a project I'm working on to work around this problem.

[process-bot]

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

[pete-murphy]

This difference can be significant in the presence of a Content-Security-Policy header. Unless you're setting unsafe-inline

Content-Security-Policy: style-src 'unsafe-inline';

the default behavior is to block inline style attributes.

However, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via JavaScript

(from MDN guide on CSP)

So CSP will block styles applied via Svg.Attributes.style but not those applied via Html.Attributes.style.