SyntaxError: '#1' is not a valid selector.

[ksbrooksjr]

I noticed while running the js-framework-benchmark (which uses numeric IDs), that Idiomorph throws an error if it encounters an ID that begins with a number in certain scenarios.

Minimal Reproduction: https://codepen.io/ksbrooksjr/pen/QwWNoxM

Given the following initial HTML:

 <div id="1"></div>

This throws an error:

import { Idiomorph } from "https://unpkg.com/idiomorph@0.7.2/dist/idiomorph.esm.js";

const div = document.getElementById("1");

try {
  Idiomorph.morph(div, `<div><div id="1"></div></div>`);
} catch (e) {
  console.error(e);
  div.innerHTML = e.message;
}

[botandrose]

Hmm, this is a weird case. The error message is correct, in that #1 is not a valid CSS selector: https://developer.mozilla.org/en-US/docs/Web/CSS/ident

However, id attributes aren't technically required to be valid CSS selectors when prepended with #, it's just discouraged: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id#syntax

I honestly don't know if this is something we should support, or if we even can support. I'll need to explore the ramifications of not being able to use querySelector

[ksbrooksjr]

I honestly don't know if this is something we should support, or if we even can support. I'll need to explore the ramifications of not being able to use querySelector

You can still use querySelector, you just have to use the attribute selector syntax:

document.querySelector(`[id="1"]`)