# Custom Properties in Elm
`Html.Attributes.style` does not support setting custom properties. For e.g. the following won't work:
```elm
style "--alert-text-color" "#123456"
```
re: [Asking for support][support]
## A workaround
```elm
attribute "style" "--alert-text-color: #123456"
```
re: [Passing variables to CSS](https://github.com/elm/virtual-dom/pull/127#issuecomment-618492674),
[Setting the gutter](https://ellie-app.com/8FHJrtr82zRa1)
## Potential pitfalls
However, it doesn't work well when other styles need to be set. For e.g. the following doesn't work:
```elm
H.div
[ style "background-color" "black"
, attribute "style" "--alert-text-color: #123456"
]
```
re: [It doesn't stack](https://github.com/elm/html/issues/177#issuecomment-1384439473)
The use of `attribute "style"` overwrites the previous styles value set by `style`. Order is important
when using this solution to ensure you don't overwrite previously set styles. So the following works:
```elm
H.div
[ attribute "style" "--alert-text-color: #123456"
, style "background-color" "black"
]
```
I personally don't see it as a problem since the only time I'd want to be using the HTML `style` attribute
in my Elm code is when I want to use custom properties. For other uses of the HTML `style` attribute I think
CSS classes in an external stylesheet are better suited.
If you really need to set both then the following snippet provides a workaround:
```elm
styles : List (String, String) -> H.Attribute msg
styles =
HA.attribute "style"
<< String.join "; "
<< List.map (\(name, value) -> name ++ ": " ++ value)
```
Now you'd be able to set custom properties along with other properties in any order you'd like:
```elm
styles
[ ( "border-color", "green" )
, ( "--circle-x", String.fromInt position.x ++ "px" )
, ( "--circle-y", String.fromInt position.y ++ "px" )
, ( "border-width", "3px" )
, ( "--circle-diameter", String.fromInt diameter ++ "px" )
, ( "background-color", "pink" )
]
```
## A special case: You only need to set custom properties
If you only need to set a bunch of custom properties then we can make it so that you don't have to
type all those "--" at the beginning.
```elm
customProperties : List (String, String) -> H.Attribute msg
customProperties =
HA.attribute "style"
<< String.join "; "
<< List.map (\(name, value) -> "--" ++ name ++ ": " ++ value)
```
For e.g.
```elm
customProperties
[ ( "circle-x", String.fromInt position.x ++ "px" )
, ( "circle-y", String.fromInt position.y ++ "px" )
, ( "circle-diameter", String.fromInt diameter ++ "px" )
]
```
## What about setting custom properties on :root?
There is a hacky solution I figured out after I stumbled upon the use of an HTML `