Improved template substantially

Author: ava-cassiopeia

templates/singleElement.js

@@ -1,3 +1,7 @@
+/**
+ * The template that is used for the shadow root for every copy of your element,
+ * which houses the styles and layout for the element.
+ */
 const template = document.createElement("template");
 template.innerHTML = `
     <style>
@@ -7,7 +11,21 @@ template.innerHTML = `
     </style>
 `;
 
+/**
+ * This is the class that controls each instance of your custom element.
+ */
 class /* {className} */ extends HTMLElement {
+    /**
+     * Part of the custom element spec. Returns an array of strings that are 
+     * the names of attributes that this element observes/listens to.
+     * 
+     * @returns {Array} an array of strings, each of which representing an 
+     *  attribute.
+     */
+    static get observedAttributes() {
+        return [];
+    };
+
     constructor() {
         super();
 
@@ -18,8 +36,34 @@ class /* {className} */ extends HTMLElement {
         // add any initial variables here
     }
 
+    /**
+     * Part of the custom element spec. Called after your element is attached to
+     * the DOM. Do anything related to the element or its children here in most
+     * cases.
+     */
     connectedCallback() {
-        // do something here on element init
+        
+    }
+
+    /**
+     * Part of the custom element spec. Called after your element is remove from
+     * the DOM. Disconnect any listeners or anything else here.
+     */
+    disconnectedCallback() {
+
+    }
+
+    /**
+     * Part of the custom element spec. Called when one of the observed
+     * attributes changes, either via setAttribute() or with the attribute being
+     * manually set in the HTML.
+     * 
+     * @param {String} name the name of the attribute that changed
+     * @param {Mixed} oldValue the previous value of the attribute
+     * @param {Mixed} newValue the new value of the attribute
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+        // respond to a changed attribute here
     }
 }