Custom Elements API v1

hello-world.html

@@ -4,62 +4,65 @@
 </template>
 
 <script>
-(function(window, document, undefined) {
-    // Refers to the "importer", which is index.html
-    var thatDoc = document;
+    // Creates MyElements extending HTML Element
+    class MyElement extends HTMLElement {
+        // Fires when an instance of the element is created or updated
+        constructor() {
+            super();
 
-    // Refers to the "importee", which is src/hello-world.html
-    var thisDoc =  (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;
+            // Refers to the "importer", which is index.html
+            this.thatDoc = document;
 
-    // Gets content from <template>
-    var template = thisDoc.querySelector('template').content;
+            // Refers to the "importee", which is src/hello-world.html
+            this.thisDoc = (this.thatDoc._currentScript || this.thatDoc.currentScript).ownerDocument;
 
-    // Creates an object based in the HTML Element prototype
-    var MyElementProto = Object.create(HTMLElement.prototype);
+            // Gets content from <template>
+            this.template = this.thisDoc.querySelector('template');
 
-    // Creates the "who" attribute and sets a default value
-    MyElementProto.who = 'World';
+        }
 
-    // Fires when an instance of the element is created
-    MyElementProto.createdCallback = function() {
-        // Creates the shadow root
-        var shadowRoot = this.createShadowRoot();
+        static get observedAttributes() {
+            return ['who'];
+        }
 
-        // Adds a template clone into shadow root
-        var clone = thatDoc.importNode(template, true);
-        shadowRoot.appendChild(clone);
+        set who(val) {
+            this.strong.textContent = val;
+        }
 
-        // Caches <strong> DOM query
-        this.strong = shadowRoot.querySelector('strong');
+        // Fires when an instance was inserted into the document
+        connectedCallback() {
+            // Creates the shadow root
+            let shadowRoot = this.attachShadow({mode: 'open'});
 
-        // Checks if the "who" attribute has been overwritten
-        if (this.hasAttribute('who')) {
-            var who = this.getAttribute('who');
-            this.setWho(who);
-        }
-        else {
-            this.setWho(this.who);
+            // Adds a template clone into shadow root
+            const clone = this.template.content.cloneNode(true);
+            shadowRoot.appendChild(clone);
+
+            this.strong = shadowRoot.querySelector('strong');
+
+            // Checks if the "who" attribute has been overwritten
+            if (this.hasAttribute('who')) {
+                this.who = this.getAttribute('who');
+            }
+            else {
+                // Creates the "who" attribute and sets a default value
+                this.who = 'World';
+            }
         }
-    };
 
-    // Fires when an attribute was added, removed, or updated
-    MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) {
-        if (attr === 'who') {
-            this.setWho(newVal);
+        // Fires when an instance was removed from the document
+        disconnectedCallback() {
         }
-    };
 
-    // Sets new value to "who" attribute
-    MyElementProto.setWho = function(val) {
-        this.who = val;
+        // Fires when an attribute was added, removed, or updated
+        attributeChangedCallback(attrName, oldVal, newVal) {
+        }
 
-        // Sets "who" value into <strong>
-        this.strong.textContent = this.who;
-    };
+        // Fires when an attribute was added, removed, or updated
+        adoptedCallback() {
+        }
+    }
 
-    // Registers <hello-world> in the main document
-    window.MyElement = thatDoc.registerElement('hello-world', {
-        prototype: MyElementProto
-    });
-})(window, document);
+    // Registers custom element
+    window.customElements.define('hello-world', MyElement);
 </script>