The href attribute cannot be removed once added

[lydell]

SSCCE (Ellie):

module Main exposing (main)

import Browser
import Html exposing (a, div, h1, text)
import Html.Attributes exposing (href)
import Html.Events exposing (onClick)


main : Program () Bool ()
main =
    Browser.sandbox
        { init = False
        , view = view
        , update = always not
        }


view : Bool -> Html.Html ()
view model =
    div []
        [ a
            (if model then
                [ href "#home", onClick () ]

             else
                []
            )
            [ text "Home" ]
        , text " | "
        , a
            (if model then
                []

             else
                [ href "#about", onClick () ]
            )
            [ text "About" ]
        , h1 []
            [ if model then
                text "About"

              else
                text "Home"
            ]
        ]

The HTML spec suggests using an <a> element without href for the current page in a navigation:

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

If a site uses a consistent navigation toolbar on every page, then the link that would normally link to the page itself could be marked up using an a element:

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

The above SSCCE implements that:

Notice how Home is in black, while About is blue and underlined – this is the default browser styling of <a> elements with and without href.

But once you click About, you get this:

Now both are blue and underlined (but About was supposed to be black)! This is because <a href="#about">About</a> was changed into <a href="">About</a> instead of <a>About</a>.

That happens because the virtual DOM is removing the href by setting it to "". Unfortunately, that doesn’t remove the href attribute.

https://github.com/elm/virtual-dom/blob/5a5bcf48720bc7d53461b3cd42a9f19f119c5503/src/Elm/Kernel/VirtualDom.js#L895

A solution could be to use attribute (.setAttribute and .removeAttirbute) instead of property in this case.

• Preact explicitly avoids setting .href and uses .setAttribute instead: https://github.com/preactjs/preact/blob/139a8625f31fa6aa53c8e74e10045f603ca9c180/src/diff/props.js#L111
• React only uses properties for a few select cases, and href isn’t one of them: https://github.com/facebook/react/blob/9198a5cec0936a21a5ba194a22fcbac03eba5d1d/packages/react-dom/src/shared/DOMProperty.js#L360-L383 (code for setting stuff: facebook/react@9198a5c/packages/react-dom/src/client/DOMPropertyOperations.js#L150-L176)

Other string properties than href could have the same problem – I haven’t checked. It could be that everything using stringProperty actually should be using attribute.

Previous issue about this that is closed for unknown reasons: #142

Probably the same issue in the virtual-dom repo: elm/virtual-dom#169