Fixes integrations in apps, handles custom Element lifecycle events

Author: xcambar

addon/create-web-components.js

@@ -1,4 +1,5 @@
 import config from 'ember-get-config'
+import Ember from 'ember'
 
 let name = config.modulePrefix;
 
@@ -25,16 +26,29 @@ class ApplicationContainer extends HTMLElement {
     let rootParent = document.createElement('div')
     _appendStyles(rootParent, this.#styles)
     let rootElement = document.createElement('div')
+    rootElement.setAttribute('data-ember-root-element', Ember.guidFor(this))
     this.#shadowRoot.appendChild(rootParent)
     rootParent.appendChild(rootElement)
 
-    // Actually start the app
+  }
+
+  connectedCallback() {
+    if (this.#application || !this.isConnected) {
+      return
+    }
+
     let app = require(`${name}/app`).default.create({
-      rootElement
+      rootElement: this.#shadowRoot.querySelector(`[data-ember-root-element="${Ember.guidFor(this)}"]`)
     })
     this.#application = app
   }
 
+  disconnectedCallback() {
+    if (!this.#application.isDestroyed && !this.#application.isDestroying) {
+      this.#application.destroy()
+    }
+  }
+
   // That makes the application accessible via:
   // document.querySelector('application-name').__EMBER_APPLICATION
   get __EMBER_APPLICATION() {
@@ -53,8 +67,6 @@ customElements.define(componentName, ApplicationContainer)
 /**
  * TODO
  *    RECOMMEND to remove export-application-global
- *    Allow for multiple instances (clean exportApplicationGlobal)
- *    Destruction of comonent <=> Destruction of the app
  *    Attributes and slots
  *    More isolation
  */

package.json

@@ -21,7 +21,8 @@
     "test:all": "ember try:each"
   },
   "dependencies": {
-    "ember-cli-babel": "^7.7.3"
+    "ember-cli-babel": "^7.7.3",
+    "ember-get-config": "^0.2.4"
   },
   "devDependencies": {
     "@ember/optional-features": "^0.7.0",
@@ -36,7 +37,6 @@
     "ember-cli-template-lint": "^1.0.0-beta.1",
     "ember-cli-uglify": "^2.1.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-get-config": "^0.2.4",
     "ember-load-initializers": "^2.0.0",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-qunit": "^4.4.1",