developit/htm
Vedi su GitHubAmpersand escapes in text content handled differently to JSX
Open
#76 aperta il 15 mar 2019
discussionhelp wanted
Metriche repository
- Star
- (8453 star)
- Metriche merge PR
- (Nessuna PR mergiata in 30 g)
Descrizione
Reproduction
With the following code:
import htm from "https://unpkg.com/htm@2.1.1/dist/htm.mjs";
import { h } from "https://unpkg.com/preact@8.4.2/dist/preact.mjs";
const html = htm.bind(h);
console.log(html`<div><</div>`)
I get a VNode with .children = ["<"] — i.e. what I mean to render as < gets rendered as < instead.
Expected results
Testing this in JSX via say https://jsx.egoist.moe/?mode=vue, <div><</div> gets transformed into h("div", ["<"]); as I originally expected.
I haven't poked into how they are doing this… seems like something that ultimately relies on a lookup table.
Workaround
I am able to escape via string interpolation (e.g. ${'<'} instead of <). Changing the last line in my sample code to:
// …
console.log(html`<div>${'<'}</div>`)
Results in a VNode with .children = ["<"] as I need. Is this the recommended style?