diff --git a/src/snabbdom.ts b/src/snabbdom.ts index f9da346..9568db5 100644 --- a/src/snabbdom.ts +++ b/src/snabbdom.ts @@ -98,8 +98,8 @@ export function init(modules: Array>, domApi?: DOMAPI) { const tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel; const elm = vnode.elm = isDef(data) && isDef(i = (data as VNodeData).ns) ? api.createElementNS(i, tag) : api.createElement(tag); - if (hash < dot) elm.id = sel.slice(hash + 1, dot); - if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/\./g, ' '); + 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.array(children)) { for (i = 0; i < children.length; ++i) { diff --git a/test/core.js b/test/core.js index 02436bd..64a4a8a 100644 --- a/test/core.js +++ b/test/core.js @@ -113,19 +113,40 @@ describe('snabbdom', function() { elm = patch(vnode0, h('svg-custom-el')).elm; assert.notEqual(elm.namespaceURI, SVGNamespace); }); - it('is receives classes in selector', function() { + it('receives classes in selector', function() { elm = patch(vnode0, h('div', [h('i.am.a.class')])).elm; assert(elm.firstChild.classList.contains('am')); assert(elm.firstChild.classList.contains('a')); assert(elm.firstChild.classList.contains('class')); }); - it('is receives classes in class property', function() { + it('receives classes in class property', function() { elm = patch(vnode0, h('i', {class: {am: true, a: true, class: true, not: false}})).elm; assert(elm.classList.contains('am')); assert(elm.classList.contains('a')); assert(elm.classList.contains('class')); assert(!elm.classList.contains('not')); }); + it('receives classes in selector when namespaced', function() { + elm = patch(vnode0, + h('svg', [ + h('g.am.a.class.too') + ]) + ).elm; + assert(elm.firstChild.classList.contains('am')); + assert(elm.firstChild.classList.contains('a')); + assert(elm.firstChild.classList.contains('class')); + }); + it('receives classes in class property when namespaced', function() { + elm = patch(vnode0, + h('svg', [ + h('g', {class: {am: true, a: true, class: true, not: false, too: true}}) + ]) + ).elm; + assert(elm.firstChild.classList.contains('am')); + assert(elm.firstChild.classList.contains('a')); + assert(elm.firstChild.classList.contains('class')); + assert(!elm.firstChild.classList.contains('not')); + }); it('handles classes from both selector and property', function() { elm = patch(vnode0, h('div', [h('i.has', {class: {classes: true}})])).elm; assert(elm.firstChild.classList.contains('has'));