messing around

generator/components/card-front.html

@@ -69,36 +69,39 @@
 </template>
 
 <script>
-(function(window, document) {
-  var elemName = 'card-front';
-  var thatDoc = document;
-  var thisDoc = (thatDoc.currentScript || thatDoc._currentScript).ownerDocument;
-  var proto = Object.create(HTMLElement.prototype, {
-    createdCallback: {
-      value: function() {
-        var template = thisDoc.getElementById(elemName);
-        var clone = thatDoc.importNode(template.content, true);
-        this.createShadowRoot().appendChild(clone);
-      }
-    },
-    attachedCallback: {
-        value: function () {
-            var root = this.shadowRoot;
-            var color = "black";
-            for (var i = 0; i < this.attributes.length; i++) {
-                var attribute = this.attributes[i];
-                switch (attribute.name) {
-                    case "color": color = attribute.value;
-                }
+    (function (window, document) {
+        var elemName = 'card-front';
+        var mainDoc = document;
+        var importDoc = document.currentScript.ownerDocument;
+
+        var proto = Object.create(HTMLElement.prototype);
+        Object.defineProperty(proto, "color", {
+            get: function () {
+                return "";
+            },
+            set: function (value) {
+                var root = this.shadowRoot;
+                var style = root.getElementById("card").style;
+                style.color = value;
+                style.backgroundColor = value;
+                style.borderColor = value;
             }
+        });
+        proto.createdCallback = function () {
+            var template = importDoc.getElementById(elemName);
+            var clone = mainDoc.importNode(template.content, true);
+            var root = this.createShadowRoot();
+            root.appendChild(clone);
 
-            var cardStyle = root.getElementById("card").style;
-            cardStyle.color = color;
-            cardStyle.backgroundColor = color;
-            cardStyle.borderColor = color;
+            this.color = this.getAttribute('color') || "black";
+        }
+        proto.attributeChangedCallback = function (name, oldValue, newValue) {
+            switch (name) {
+                case "color": this.color = newValue;
+            }
         }
-    }
-  });
-  thatDoc.registerElement(elemName, {prototype: proto});
-})(window, document);
+
+        mainDoc.registerElement(elemName, { prototype: proto });
+
+    })(window, document);
 </script>

generator/components/card-title.html

@@ -64,7 +64,7 @@
                 if (value > 16) value = 16;
                 if (value < 10) value = 10;
                 var root = this.shadowRoot;
-                root.querySelector("#title").className = "title-" + value;
+                root.getElementById("title").className = "title-" + value;
             }
         });
         proto.createdCallback = function () {
@@ -75,9 +75,9 @@
 
             this.size = this.getAttribute('size') || 13;
         }
-        proto.attributeChangedCallback = function (name, value) {
+        proto.attributeChangedCallback = function (name, oldValue, newValue) {
             switch (name) {
-                case "size": this.size = value;
+                case "size": this.size = newValue;
             }
         }