developit/htm
Voir sur GitHubAmpersand escapes in text content handled differently to JSX
Open
#76 ouverte le 15 mars 2019
discussionhelp wanted
Métriques du dépôt
- Stars
- (8 453 stars)
- Métriques de merge PR
- (Aucune PR mergée en 30 j)
Description
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?