Use custom element on pane-element

document.registerElement is being deprecated which will make upgrading
to later versions of electron imposible

Author: sadick254

src/pane-element.js

@@ -2,15 +2,17 @@ const path = require('path');
 const { CompositeDisposable } = require('event-kit');
 
 class PaneElement extends HTMLElement {
-  createdCallback() {
+  constructor() {
+    super();
     this.attached = false;
     this.subscriptions = new CompositeDisposable();
     this.inlineDisplayStyles = new WeakMap();
-    this.initializeContent();
     this.subscribeToDOMEvents();
+    this.itemViews = document.createElement('div');
   }
 
-  attachedCallback() {
+  connectedCallback() {
+    this.initializeContent();
     this.attached = true;
     if (this.model.isFocused()) {
       this.focus();
@@ -24,7 +26,6 @@ class PaneElement extends HTMLElement {
   initializeContent() {
     this.setAttribute('class', 'pane');
     this.setAttribute('tabindex', -1);
-    this.itemViews = document.createElement('div');
     this.appendChild(this.itemViews);
     this.itemViews.setAttribute('class', 'item-views');
   }
@@ -148,6 +149,7 @@ class PaneElement extends HTMLElement {
         });
       }
     }
+
     if (!this.itemViews.contains(itemView)) {
       this.itemViews.appendChild(itemView);
     }
@@ -213,6 +215,12 @@ class PaneElement extends HTMLElement {
   }
 }
 
-module.exports = document.registerElement('atom-pane', {
-  prototype: PaneElement.prototype
-});
+function createPaneElement() {
+  return document.createElement('atom-pane');
+}
+
+window.customElements.define('atom-pane', PaneElement);
+
+module.exports = {
+  createPaneElement
+};

src/pane.js

@@ -2,7 +2,7 @@ const Grim = require('grim');
 const { CompositeDisposable, Emitter } = require('event-kit');
 const PaneAxis = require('./pane-axis');
 const TextEditor = require('./text-editor');
-const PaneElement = require('./pane-element');
+const { createPaneElement } = require('./pane-element');
 
 let nextInstanceId = 1;
 
@@ -98,7 +98,7 @@ module.exports = class Pane {
 
   getElement() {
     if (!this.element) {
-      this.element = new PaneElement().initialize(this, {
+      this.element = createPaneElement().initialize(this, {
         views: this.viewRegistry,
         applicationDelegate: this.applicationDelegate
       });