You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
moduleMainexposing (main)
importBrowserimportHtmlexposing (a, div, h1, text)
importHtml.Attributesexposing (href)
importHtml.Eventsexposing (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:
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:
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.
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
SSCCE (Ellie):
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
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 withouthref
.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 thehref
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 ofproperty
in this case..href
and uses.setAttribute
instead: https://github.com/preactjs/preact/blob/139a8625f31fa6aa53c8e74e10045f603ca9c180/src/diff/props.js#L111href
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 usingstringProperty
actually should be usingattribute
.Previous issue about this that is closed for unknown reasons: #142
Probably the same issue in the virtual-dom repo: elm/virtual-dom#169
The text was updated successfully, but these errors were encountered: