remove mutation observer

Author: Graham Butler

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@author.io/element-control",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "author-control custom element (web component).",
   "main": "dist/author-control.min.js",
   "scripts": {

showroom/src/js/index.js

@@ -2,7 +2,15 @@ const Demo = new NGNX.VIEW.Registry({
   selector: '.demo',
   namespace: 'demo.',
 
+  references: {
+    content: 'main .content'
+  },
+
+  templates: {
+    select: './js/templates/select.html'
+  },
+
   init () {
-    console.log('works');
+    this.render('select', {}, this.ref.content.element)
   }
 })

showroom/src/js/templates/select.html

@@ -0,0 +1,8 @@
+<author-control>
+  <label>Rendered Select</label>
+  <select>
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+  </select>
+</author-control>

src/element.js

@@ -7,6 +7,11 @@ class AuthorFormControlElement extends AuthorBaseElement(HTMLElement) {
     })
 
     this.UTIL.defineProperties({
+      initialized: {
+        private: true,
+        default: false
+      },
+
       initialValue: {
         default: null
       },
@@ -168,8 +173,8 @@ class AuthorFormControlElement extends AuthorBaseElement(HTMLElement) {
             break
         }
 
+        this.PRIVATE.initialized = true
         this.emit('initialized')
-        return console.dir(this);
       },
 
       initAuthorDatalist: () => {
@@ -246,34 +251,12 @@ class AuthorFormControlElement extends AuthorBaseElement(HTMLElement) {
       }
     })
 
-    this.UTIL.monitorChildren((mutations, observer) => {
-      let filtered = mutations.filter(record => {
-        let node = record.addedNodes.item(0)
-
-        if (!node) {
-          return false
-        }
-
-        return node.nodeType !== 3
-      })
-
-      filtered.forEach((record, index, array) => {
-        let node = record.addedNodes.item(0)
-
-        if (!node) {
-          return
-        }
-
-        this.PRIVATE.catalogChild(node)
-        // this.PRIVATE.transformChild(node, index, array.map(mutation => mutation.addedNodes.item(0)))
-      })
-
-      observer.disconnect()
-      this.PRIVATE.init()
-    })
-
     this.UTIL.registerListeners(this, {
-      connected: () => this.PRIVATE.guid = this.UTIL.generateGuid('control_')
+      connected: () => this.PRIVATE.guid = this.UTIL.generateGuid('control_'),
+      rendered: () => {
+        Array.from(this.children).forEach(child => this.PRIVATE.catalogChild(child))
+        this.PRIVATE.init()
+      }
     })
   }