#551 - V1 custom elements - missing functionality

src/CustomElements/v1/CustomElements.js

@@ -150,6 +150,12 @@ var CustomElementDefinition;
       this._addNodes(doc.childNodes);
     }
 
+    // http://w3c.github.io/webcomponents/spec/custom/#dom-customelementsregistry-get
+    get(localName) {
+      const def = this._definitions.get(localName);
+      return def ? def.constructor : undefined;
+    }
+
     flush() {
       this._handleMutations(this._observer.takeRecords());
     }
@@ -237,11 +243,21 @@ var CustomElementDefinition;
         new (definition.constructor)();
         console.assert(this._newInstance == null);
       }
-      if (definition.attributeChangedCallback && definition.observedAttributes.length > 0) {
+
+      var observedAttributes = definition.observedAttributes;
+      if (definition.attributeChangedCallback && observedAttributes.length > 0) {
         this._attributeObserver.observe(element, {
           attributes: true,
           attributeOldValue: true,
-          attributeFilter: definition.observedAttributes,
+          attributeFilter: observedAttributes,
+        });
+
+        // Trigger attributeChangedCallback for existing attributes.
+        // http://w3c.github.io/webcomponents/spec/custom/#upgrades - part 8
+        observedAttributes.forEach(function (name) {
+          if (element.hasAttribute(name)) {
+            element.attributeChangedCallback(name, null, element.getAttribute(name));
+          }
         });
       }
     }
@@ -296,7 +312,7 @@ var CustomElementDefinition;
   var rawCreateElement = doc.createElement.bind(document);
   doc._createElement = function(tagName, callConstructor) {
     var customElements = win['customElements'];
-    var element = rawCreateElement.call(document, tagName);
+    var element = rawCreateElement(tagName);
     var definition = customElements._definitions.get(tagName.toLowerCase());
     if (definition) {
       customElements._upgradeElement(element, definition, callConstructor);

tests/CustomElements/v1/js/customElements.js

@@ -313,6 +313,34 @@ suite('customElements', function() {
     done();
   });
 
+  test('customElements.get', function (done) {
+    class XBoo extensd HTMLElement {}
+    customElements.define('x-boo-get', XGetTest);
+    assert.equal('gaga', customElements.get('x-get-test'));
+    done();
+  });
+
+  test('attributeChangedCallback for existing observed attributes', function (done) {
+    var changed = [];
+    class XBoo extends HTMLElement {
+      static observedAttributes () {
+        return ['test1'];
+      }
+      attributeChangedCallback(name, oldValue, newValue) {
+        changed.push({ name, oldValue, newValue });
+      }
+    }
+    var xboo = new XBoo();
+    xboo.setAttribute('test1', 'test1');
+    xboo.setAttribute('test2', 'test2');
+    customElements.flush();
+    assert.equal(changed.length, 1, 'should only trigger for observed attributes');
+    assert.equal(changed[0].name).to.equal('test1', 'name');
+    assert.equal(changed[0].oldValue).to.equal(null, 'oldValue');
+    assert.equal(changed[0].newValue).to.equal('test1', 'newValue');
+    done();
+  });
+
   test('document.registerElement disconnectedCallbacks in prototype', function(done) {
     var ready, inserted, removed;
     class XBoo extends HTMLElement {