Breaks When Using <br/>

[FlorianWendelborn]

I tried to modify the counter example. When inserting a line-break <br/> it broke. 🙁

Console

InvalidCharacterError (DOM Exception 5): The string contains invalid characters.

Minimal Repro

app({
    view: () => html`<div>a<br/>b</div>`
})

Meta

Corresponding issue on hyperx's repo.
Related to choojs/hyperx#34.

---

Note that I do realize that <br> works. <br/> is more explicit though and as a React-user I'd like to keep this pattern.

[jorgebucaran]

@dodekeract This seems to be an issue with Hyperx.

The solution is to append a space after the tag's name.

app({
    view: () => html`<div>a<br />b</div>`
})

Same applies to other self-closing tags.

EDIT: <br/> attempts to create an element with the name br/, so alternatively, we could patch this inside HyperApp's h. Not very nice, but I'll keep it in mind.

[FlorianWendelborn]

@jbucaran So should I open the upstream issue or will we fix it here?

[jorgebucaran]

@dodekeract The right thing to do, for now, is to open an issue there: https://github.com/substack/hyperx/issues/new

EDIT: Found this, possibly related? choojs/hyperx#34

[jorgebucaran]

@dodekeract Do you think we can close?

[FlorianWendelborn]

@jorgebucaran has this been fixed or is it confirmed to be only related to hyperx? If the answer is yes then feel free to close. 😉

[jorgebucaran]

@dodekeract Confirmed this is a hyperx bug: choojs/hyperx#34.