modify Component.toHTML to property encode attribute values

src/dom_components/model/Component.js

@@ -669,20 +669,33 @@ const Component = Backbone.Model.extend(Styleable).extend(
       const sTag = model.get('void');
       const attributes = this.getAttrToHTML();
 
+      let el = document.createElement(tag);
+
       for (let attr in attributes) {
         const value = attributes[attr];
 
         if (!isUndefined(value)) {
-          attrs.push(`${attr}="${value}"`);
+          el.setAttribute(attr, value);
         }
       }
 
-      let attrString = attrs.length ? ` ${attrs.join(' ')}` : '';
-      let code = `<${tag}${attrString}${sTag ? '/' : ''}>${model.get(
-        'content'
-      )}`;
-      model.get('components').each(comp => (code += comp.toHTML()));
-      !sTag && (code += `</${tag}>`);
+      if (!sTag) {
+        let innerHTML = model.get('content');
+        model.get('components').each(comp => (innerHTML += comp.toHTML()));
+        el.innerHTML = innerHTML;
+      }
+
+      let code = el.outerHTML;
+
+      if (sTag) {
+        // remove the closing tag in case this is a custom void element
+        code = code.replace('</' + tag + '>', '');
+
+        // void elements created through document.createElement may not have the ending slash
+        if (code.substr(-2) != '/>') {
+          code = code.substr(0, code.length - 1) + '/>';
+        }
+      }
 
       return code;
     },

test/specs/dom_components/model/Component.js

@@ -137,10 +137,12 @@ module.exports = {
 
       it('Component toHTML with quotes in attribute', () => {
         obj = new Component();
-        let attr = obj.get('attributes');
-        attr['data-foo'] = '"bar"';
-        obj.set('attributes', attr);
-        expect(obj.toHTML()).toEqual('<div data-foo="&quot;foo&quot;"></div>');
+        let attrs = obj.get('attributes');
+        attrs['data-test'] = '"value"';
+        obj.set('attributes', attrs);
+        expect(obj.toHTML()).toEqual(
+          '<div data-test="&quot;value&quot;"></div>'
+        );
       });
 
       it('Component parse empty div', () => {