Use custom element on pane resize-handle element

sadick254 · sadick254 · commit abd79d29f7d7 · 2021-08-03T22:59:27.000+03:00
diff --git a/src/pane-axis-element.js b/src/pane-axis-element.js
@@ -1,6 +1,5 @@
 const { CompositeDisposable } = require('event-kit');
-/* eslint-disable-next-line no-unused-vars */
-const PaneResizeHandleElement = require('./pane-resize-handle-element');
+require('./pane-resize-handle-element');
 
 class PaneAxisElement extends HTMLElement {
   connectedCallback() {
diff --git a/src/pane-resize-handle-element.js b/src/pane-resize-handle-element.js
@@ -1,5 +1,6 @@
 class PaneResizeHandleElement extends HTMLElement {
-  createdCallback() {
+  constructor() {
+    super()
     this.resizePane = this.resizePane.bind(this);
     this.resizeStopped = this.resizeStopped.bind(this);
     this.subscribeToDOMEvents();
@@ -10,7 +11,7 @@ class PaneResizeHandleElement extends HTMLElement {
     this.addEventListener('mousedown', this.resizeStarted.bind(this));
   }
 
-  attachedCallback() {
+  connectedCallback() {
     // For some reason Chromium 58 is firing the attached callback after the
     // element has been detached, so we ignore the callback when a parent element
     // can't be found.
@@ -20,7 +21,7 @@ class PaneResizeHandleElement extends HTMLElement {
     }
   }
 
-  detachedCallback() {
+  disconnectedCallback() {
     this.resizeStopped();
   }
 
@@ -105,6 +106,15 @@ class PaneResizeHandleElement extends HTMLElement {
   }
 }
 
-module.exports = document.registerElement('atom-pane-resize-handle', {
-  prototype: PaneResizeHandleElement.prototype
-});
+window.customElements.define(
+  'atom-pane-resize-handle',
+  PaneResizeHandleElement
+);
+
+function createPaneResizeHandleElement() {
+  return document.createElement('atom-pane-resize-handle');
+}
+
+module.exports = {
+  createPaneResizeHandleElement
+};
