Bel generates weird output with void html elements and unquoted attributes

[josephg]

In the HTML spec, some elements are void and don't have closing tags:

Void elements
area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr

But in bel, they cause weird problems:

const bel = require('bel')
const element = bel`<span><input type=checkbox>some content</span>`
console.log(element.outerHTML)

It should be valid, but for some reason the content gets dropped from the output. It generates:

<span><input type="checkbox"></span>

Weirdly if I put quotes around the attribute (<input type="checkbox">) then it works. It also works if I put in a spurious /> - ie, <input type=checkbox />

[yoshuawuyts]

This has been a known issue for a while now; we should definitely fix this! I think the reason this hasn't been fixed so far is b/c workarounds are quite straight forward, and people have been constrained on time lately (e.g. building out an ecosystem of plain HTML modules). A PR to fix this would be super helpful; and I'd be thrilled to assist in getting it landed (and I'm sure I wouldn't be the only one). Hope this somewhat makes sense; I agree it'd be heaps neat if this could be solved! :D

…

On Mon, Oct 2, 2017 at 11:13 PM Seph Gentle ***@***.***> wrote: In the HTML spec <https://www.w3.org/TR/html51/syntax.html#writing-html-documents-elements>, some elements are void and don't have closing tags: Void elements area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr But in bel, they cause weird problems: const bel = require('bel')const element = bel`<span><input type=checkbox>some content</span>`console.log(element.outerHTML) It should be valid, but for some reason the content gets dropped from the output. It generates: <span><input type="checkbox"></span> Weirdly if I put quotes around the attribute (<input type="checkbox">) then it works. It also works if I put in a spurious /> - ie, <input type=checkbox /> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#94>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACWleuxyrZ8p7p6DlP7KsV9459481E92ks5soaZZgaJpZM4Prhzx> .

[josephg]

It looks like its actually a bug in hyperx and I've filed an issue there - choojs/hyperx#55

[josephg]

I'll see if I can find it and make a PR. Its too annoying.

[josephg]

Should be fixed by choojs/hyperx#56

[yoshuawuyts]

hyperx@2.3.1 landed which should close the self-closing tags; not sure if this also fixes the unquoted string situation?

[josephg]

Oh yeah, I should have closed this ages ago. Thanks!