developit / developit/htm

Ampersand escapes in text content handled differently to JSX

Open
#76 11 comments 5 reactions 0 assignees View on GitHub
discussion help wanted
Dominant language
JavaScript
Stars
9k
Forks
181
PR merge metrics
No merged PRs in 30d

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`

<
`)
```

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 , `

<
` 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`

${'<'}
`)
```

Results in a VNode with `.children = ["<"]` as I need. Is this the recommended style?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.