Can’t see CSS custom variables with a spread style attribute.

[mbostock]

This doesn’t work as expected:

html`<div style=${{"--my-variable": "40px"}}>`

Apparently it’s because unlike normal CSS properties you must use style.setProperty to set these; you can’t simply assign them to the style object like normal. Specifically per CSSOM:

The term supported CSS property refers to a CSS property that the user agent implements, including any vendor-prefixed properties, but excluding custom properties. A supported CSS property must be in its lowercase form for the purpose of comparisons in this specification.

And:

For each CSS property property that is a supported CSS property, except for properties that have no "-" (U+002D) in the property name, the following partial interface applies where dashed attribute is property.

So, I think we’ll need to somehow call style.setProperty in this case, but we don’t want to call it in every case, because if we did that, we wouldn’t get the nice automatic conversion of camel-cased properties to dashed properties (e.g., fontSize to font-size).