Runtime error: passing empty string to Html.Attributes.attribute

[strickinato]

import Html exposing (div, text)
import Html.Attributes exposing (attribute)

main =
  div [ attribute "" "" ] [ text "boom!" ]

Gives:

Main.elm:6123 Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '' is not a valid attribute name.

Using:

    "dependencies": {
        "elm-lang/core": "4.0.1 <= v < 5.0.0",
        "elm-lang/html": "1.1.0 <= v < 2.0.0"
    },

[process-bot]

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

[evancz]

What should happen instead? Is it worth it to add a check on every setAttribute that ever happens under any circumstances?

[rtfeldman]

I'd say the same thing here as what I said over there. 😄

[strickinato]

Agree - https://github.com/elm-lang/html/issues/47#issuecomment-229562502 fits in well with what I'd expect- given that it can fail

[douglascorrea]

As commented in #47, setAttribute can raise INVALID_CHARACTER_ERR DOMException, but also can raise NO_MODIFICATION_ALLOWED_ERR, which not fits in this error case. And I think @rtfeldman suggestion fits here too.

[evancz]

I think the same resolution from #47 makes sense here as well, so I am going to close. I am not certain this is the right thing, but I don't think we have a workable alternative in either case at this point in time.

[strickinato]

Hi!! Me again, but now in 2020.

I just ran into this same issue, and was shocked to find myself from 4 years ago! Hi me of the past!!

So here's some information for myself in the future, or for anyone else who lands here:

This time (and I assume last time), I hit this because I was trying to conditionally add an attribute to an element, like:

Html.div
    [ if importantThing then
        Html.Event.onClick GoWild
      else
        Html.Attribute.attribute "" ""
    ]
    []

Seems like people are talkin' about doing stuff like this all over!

It turns out though, that a nice way to add an attribute that has no effect on the DOM is to add a blank class.

attributeIf : Bool -> Html.Attribute msg -> Html.Attribute msg
attributeIf condition attr =
    if condition then
        attr
    else
        Html.Attributes.class ""
...

Html.div
    [  attributeIf importantThing (Html.Event.onClick GoWild) ] 
    []

Anyway, see you again in 4 years future Aaron!

[rtfeldman]

This comment totally made my day 😂

Miss ya, @strickinato!