Merge pull request #22785 from atom/use-custom-element-on-pane-axis

Use customElement on pane axis

src/pane-axis-element.js

@@ -3,7 +3,7 @@ const { CompositeDisposable } = require('event-kit');
 const PaneResizeHandleElement = require('./pane-resize-handle-element');
 
 class PaneAxisElement extends HTMLElement {
-  attachedCallback() {
+  connectedCallback() {
     if (this.subscriptions == null) {
       this.subscriptions = this.subscribeToModel();
     }
@@ -12,7 +12,7 @@ class PaneAxisElement extends HTMLElement {
       .map((child, index) => this.childAdded({ child, index }));
   }
 
-  detachedCallback() {
+  disconnectedCallback() {
     this.subscriptions.dispose();
     this.subscriptions = null;
     this.model.getChildren().map(child => this.childRemoved({ child }));
@@ -116,6 +116,12 @@ class PaneAxisElement extends HTMLElement {
   }
 }
 
-module.exports = document.registerElement('atom-pane-axis', {
-  prototype: PaneAxisElement.prototype
-});
+window.customElements.define('atom-pane-axis', PaneAxisElement);
+
+function createPaneAxisElement() {
+  return document.createElement('atom-pane-axis');
+}
+
+module.exports = {
+  createPaneAxisElement
+};

src/pane-axis.js

@@ -1,7 +1,7 @@
 const { Emitter, CompositeDisposable } = require('event-kit');
 const { flatten } = require('underscore-plus');
 const Model = require('./model');
-const PaneAxisElement = require('./pane-axis-element');
+const { createPaneAxisElement } = require('./pane-axis-element');
 
 class PaneAxis extends Model {
   static deserialize(state, { deserializers, views }) {
@@ -40,7 +40,10 @@ class PaneAxis extends Model {
 
   getElement() {
     if (!this.element) {
-      this.element = new PaneAxisElement().initialize(this, this.viewRegistry);
+      this.element = createPaneAxisElement().initialize(
+        this,
+        this.viewRegistry
+      );
     }
     return this.element;
   }