Changing way styles are applied to allow for custom properties

[davidkpiano]

This PR changes the way that styles are applied to DOM nodes, in order to allow for setting CSS custom properties: https://www.w3.org/TR/css-variables-1/

function applyStyles(domNode, styles)
{
  var domNodeStyle = domNode.style;

  for (var key in styles)
  {
-   domNodeStyle.style[key] = styles[key];
+   domNodeStyle.setProperty(key, styles[key]);
  }
}

This will allow developers to apply custom props in their styles like so:

myStyle =
  style
    [ ("width", "100%")
    , ("height", "40px")
    , ("--my-color", "green")
    ]

without the custom property being ignored (which is the current behavior).

[process-bot]

Thanks for the pull request! 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.

[OvermindDL1]

For note, that will work back to IE9, if you want IE8 and older support then something like this is recommended from reading around:

            if (domNodeStyle.setProperty) {
                domNodeStyle.setProperty(key, styles[key], null);
            } 
            else {
                domNodeStyle.setAttribute(key, styles[key]);
            }

[evancz]

Figure out the performance impact of this.

[davidkpiano]

@evancz You'll be happy to know that .setProperty is actually faster:

https://jsperf.com/dom-style-vs-setproperty

[OvermindDL1]

Holds true in Chrome and Firefox, but Edge is 'slightly' faster the other way and IE11 is significantly faster the other way:

So I'd say go for it as Edge barely has any difference and IE11 is, well, IE11.

[evancz]

I would like to wait on making a change like this until there is some evidence that it makes things nicer. I have shared my concerns in https://github.com/elm-lang/html/issues/129#issuecomment-313608729 and https://github.com/elm-lang/virtual-dom/pull/95#issuecomment-313609258

[davidkpiano]

I'm not sure the exact purpose of CSS variables when you are working in a language that has variables. It seems like this is a 2nd way to do things we can already do differently, except now without any compiler help for types and typos.

This is definitely a misunderstanding in what CSS custom properties (CSS variables) are, as there are many measurable and pragmatic benefits to using them. The biggest ones are frictionless contextual theming (difficult to do with just Elm, because it necessitates passing all theme-related variables deep into anything that needs them, which increases noise) and styling pseudo-elements (which is impossible to do with just Elm).

I'm working on a CSS-Tricks article in using CSS Variables with React (they've just added support for it 🎉), which can hopefully shed more light on this.

[aforemny]

Hi, I am working on porting a CSS/JS library to Elm, I re-write the JS but keep the CSS. The library uses CSS variables for theming as well as animations. Because I cannot set CSS variables in Elm, I would have to re-write CSS animations that use them and not offer upstream theming. Theming here includes CSS layout combinator classes (ie. grid gutter widths).

Support for CSS variables would solve both issues in my case. Any chance to re-open this? :)

[anagrius]

@davidkpiano Fully agree with you here. When doing theming and especially working with css components that are external from the project, custom properties are a big benefit.
We use a shared set of css components across several projects, and much of the "state" of these components are based on custom properties.

Today we have to hack around it and include inline <style> with an ad-hoc class rule to set the properties. Yuck

My initial reaction when finding this out is "This must be a bug". Yet, @evancz does not seem to feel like that (https://github.com/elm-lang/html/issues/129#issuecomment-313608729).