Wrapper around Html.Styled.style which adds a data-nri-description attribute to make it easier to tell from Inspect Element where in our code that element was defined.

Takes a function that creates an element, and pre-applies styles and a data-nri-description attribution to it.

bigButton : List (Attribute msg) -> List (Html msg) -> Html msg
bigButton =
    styled button
        "big button"
        [ padding (px 30)
        , fontWeight bold
        ]


view : Model -> Html msg
view model =
    [ text "These two buttons are identical:"
    , bigButton [] [ text "Hi!" ]
    , button [ css [ padding (px 30), fontWeight bold ] ] [] [ text "Hi!" ]
    ]

Here, the bigButton function we've defined using styled button is identical to the normal button function, except that it has pre-applied the attribute of css [ padding (px 30), fontWeight bold ], as well as (attribute "data-nri-description" "big button").

You can pass more attributes to bigButton as usual (including other css attributes). They will be applied after the pre-applied styles.

Note: normally attributeMsg will be the same as msg, but we need them to be different types for special cases when fn needs to do tricky things. For example, some elements from the Accessibility.Styled package use the following type signature:

div : List (Attribute Never) -> List (Html msg) -> Html msg