Render breaks if RenderBuffer's DOMHelper has an SVG namespace

[jdjkelly]

Important caveat: I'm unsure if this bug is with list-view or with Ember's RenderBuffer implementation.

It appears that if you try to render a component with a tagName of SVG immediately prior to ember-list-view, list-view's render function throws this error:

Uncaught TypeError: Cannot set property className of #<SVGElement> which has only a getter

I've provided an example here: https://github.com/jdjkelly/list-view-example (just a regular ember-cli project - example is in the application route)

application.hbs looks like this:

{{svg-component}}

{{#ember-list contentBinding=model height=100 rowHeight=50}}
   {{name}}
{{/ember-list}}

svg-component.js looks like this:

import Ember from 'ember';

export default Ember.Component.extend({
   tagName: 'svg'
});

When rendering, Ember throws the Cannot set property className on this line: https://github.com/emberjs/list-view/blob/master/addon/list-view-mixin.js#L146

  render: function (buffer) {
    var element          = buffer.element();
    var dom                = buffer.dom;
    var container        = dom.createElement('div');
    container.className  = 'ember-list-container';
    element.appendChild(container);

The createElement function calls this.namespace- which at this point is http://www.w3.org/2000/svg - so the <div> gets assigned it. Thus the <div> ends up with an immutable className and the error is thrown.

[krisselden]

@jdjkelly this will not be an issue with the next major version of list-view, since takes a very different approach to fit with the glimmer update in 1.13 and 2.0

[rwjblue]

I'm sorry we didn't get back to this previously, but at this point this repo is essentially unmaintained. Please use @html-next/vertical-collection or ember-collection for similar functionality.

Closing...