From 894a78aa3d32ab8581256db02f21f3d3b2a206c4 Mon Sep 17 00:00:00 2001
From: sadick254 <sadickjunior@gmail.com>
Date: Thu, 29 Jul 2021 07:30:53 +0300
Subject: [PATCH] Use customElements

---
 src/pane-axis-element.js | 16 +++++++++++-----
 src/pane-axis.js         |  7 +++++--
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/pane-axis-element.js b/src/pane-axis-element.js
index fd66d07b9..60cef859c 100644
--- a/src/pane-axis-element.js
+++ b/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
+};
diff --git a/src/pane-axis.js b/src/pane-axis.js
index 8abe6641f..08afa2351 100644
--- a/src/pane-axis.js
+++ b/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;
   }