v143 · dom

querySelector with Exotic Names

Creating an element with createElement("artículo🦊") is only half the story. Querying it back with querySelector requires the tag name to be CSS-escaped first. This demo shows the full round-trip: create → append → CSS.escape → query → match.

Feature detection: checking…

create → query sandbox

Type any tag name and attribute name — the demo creates the element, appends it to a hidden stage, then queries it back using CSS.escape().

→ Click "Create & Query" to run the round-trip.

CSS.escape() gallery

Click any card to load that tag name into the sandbox above and run the test immediately.

attribute selector with unicode names

[data-名前] needs CSS.escape on the attribute name too: [data-\540D\524D]. Test it live.

→ Click to test attribute selector.
// Chrome 143+: createElement accepts unicode tag names
const el = document.createElement('artículo🦊');
el.setAttribute('índice', '42');
document.body.appendChild(el);

// querySelector needs CSS.escape() to build a valid selector string
const escapedTag = CSS.escape('artículo🦊');
// → "art\ED culo\1F98A "
const found = document.querySelector(escapedTag);
console.log(found === el); // true

// Attribute selectors also need escaping
const escapedAttr = CSS.escape('índice');
// → "\ED ndice"
const byAttr = document.querySelector('[' + escapedAttr + '="42"]');
console.log(byAttr === el); // true

see also