Added options.appendClassNames to (very crudely) append to className instead of overwriting it, closes #15

Author: lazd

README.md

@@ -420,6 +420,12 @@ Default: `false`
 
 Leave the `handle` attribute intact. By default, the `handle` attribute will not be added to the created elements.
 
+#### options.appendClassNames
+Type: `Boolean`  
+Default: `false`
+
+Append the contents of the `class` attribute value to the existing `className` property. This is useful when your web component sets its className in `createdCallback`.
+
 
 ### Example
 ```js

index.js

@@ -211,7 +211,10 @@ Compiler.prototype.setAttribute = function(elName, attr, value) {
 
   for (var i = 0; i < attrs.length; i++) {
     var asProperty = asProperties[attrs[i].attr];
-    if (asProperty) {
+    if (attrs[i].attr === 'class' && this.options.appendClassNames) {
+      this.pushStatement(elName+'.'+asProperty+' += '+this.makeVariableStatement(' '+attrs[i].value)+';');
+    }
+    else if (asProperty) {
       this.pushStatement(elName+'.'+asProperty+' = '+this.makeVariableStatement(attrs[i].value)+';');
     }
     else {

test/Options.js

@@ -1,3 +1,4 @@
+/* jshint -W098 */
 var expect = require('chai').expect;
 var test = require('./lib/test.js');
 
@@ -38,5 +39,32 @@ describe('Options', function() {
         }
       });
     });
+
+    it('should append classNames when options.appendClassNames is true', function() {
+      test({
+        fixture: 'Custom Elements - With class property',
+        done: function($, fixture, template, templateString) {
+          expect(templateString).to.have.string('el0.className += " myNewClass";');
+        },
+        options: {
+          appendClassNames: true
+        }
+      });
+    });
+
+    it('should append classNames when options.appendClassNames is true with variables', function() {
+      test({
+        fixture: 'Custom Elements - With class property substitute',
+        done: function($, fixture, template, templateString) {
+          expect(templateString).to.have.string('el0.className += " "+data_0["className"];');
+        },
+        data: {
+          className: 'myNewClass'
+        },
+        options: {
+          appendClassNames: true
+        }
+      });
+    });
   });
 });

test/fixtures/Custom Elements - With class property substitute.html

@@ -0,0 +1 @@
+<button is="custom-button" class="{{data.className}}">Hi</button>

test/fixtures/Custom Elements - With class property.html

@@ -0,0 +1 @@
+<button is="custom-button" class="myNewClass">Hi</button>