In elm-ui how do I apply a class or style to an element

Question

If I need to cheat and use a css class for something that is not supported by Elm-UI (backdrop-filter for example) how do I do that. I searched slack and I found htmlAttribute <| Html.Attributes.style "filter" "blur(xyz)", but I don't understand how to apply that to a Element . Thank you!

Answer 1

This was answered over on slack by a generous hero. Just moving the answer over here so that it is available to others.

The solution is to use htmlAttribute in the el just like you would centerX, spacing ~~, etc!

module Main exposing (main)

import Browser
import Element as E
import Html.Attributes


main =
    E.layout []
        (E.el
            [ E.htmlAttribute (Html.Attributes.style "color" "red")
            ]
         <|
            E.text "foo"
        )

and a class would be Html.Attributes.class "className"