diff --git a/src/init.ts b/src/init.ts index 6ab66df..90f8afb 100644 --- a/src/init.ts +++ b/src/init.ts @@ -152,7 +152,7 @@ export function init( } else if (sel !== undefined) { // Parse selector const hashIdx = sel.indexOf("#"); - const dotIdx = sel.indexOf(".", hashIdx); + const dotIdx = sel.indexOf("."); const hash = hashIdx > 0 ? hashIdx : sel.length; const dot = dotIdx > 0 ? dotIdx : sel.length; const tag = @@ -165,9 +165,12 @@ export function init( ? api.createElement(tag, data) : api.createElementNS(ns, tag, data); vnode.elm = elm; - if (hash < dot) elm.setAttribute("id", sel.slice(hash + 1, dot)); - if (dotIdx > 0) + if (hash < dot) { + elm.setAttribute("id", sel.slice(hash + 1, dot)); + } + if (dotIdx > 0) { elm.setAttribute("class", sel.slice(dot + 1).replace(/\./g, " ")); + } for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode); if ( is.primitive(vnode.text) && diff --git a/test/unit/core.ts b/test/unit/core.ts index 0fa3d93..5e0037c 100644 --- a/test/unit/core.ts +++ b/test/unit/core.ts @@ -178,6 +178,19 @@ describe("snabbdom", () => { assert(elm.firstChild.classList.contains("a")); assert(elm.firstChild.classList.contains("class")); }); + it("supports selector with # in classes", () => { + elm = patch(vnode0, h("div", [h("div.bold.bg-[#f0f0f0].shadow")])).elm; + assert.strictEqual(elm.firstChild.id, ""); + assert(elm.firstChild.classList.contains("bold")); + assert(elm.firstChild.classList.contains("bg-[#f0f0f0]")); + assert(elm.firstChild.classList.contains("shadow")); + }); + it("supports selector with # for id and # in classes", () => { + elm = patch(vnode0, h("div", [h("div#logo.bold.bg-[#f0f0f0]")])).elm; + assert.strictEqual(elm.firstChild.id, "logo"); + assert(elm.firstChild.classList.contains("bold")); + assert(elm.firstChild.classList.contains("bg-[#f0f0f0]")); + }); it("receives classes in class property", () => { elm = patch( vnode0,