Merge pull request #22780 from atom/use-custom-element-on-pane-container-element

Use custom elements on pane container element

src/panel-container-element.js

@@ -4,11 +4,12 @@ const { createFocusTrap } = require('focus-trap');
 const { CompositeDisposable } = require('event-kit');
 
 class PanelContainerElement extends HTMLElement {
-  createdCallback() {
+  constructor() {
+    super();
     this.subscriptions = new CompositeDisposable();
   }
 
-  attachedCallback() {
+  connectedCallback() {
     if (this.model.dock) {
       this.model.dock.elementAttached();
     }
@@ -111,6 +112,12 @@ class PanelContainerElement extends HTMLElement {
   }
 }
 
-module.exports = document.registerElement('atom-panel-container', {
-  prototype: PanelContainerElement.prototype
-});
+window.customElements.define('atom-panel-container', PanelContainerElement);
+
+function createPanelContainerElement() {
+  return document.createElement('atom-panel-container');
+}
+
+module.exports = {
+  createPanelContainerElement
+};

src/panel-container.js

@@ -1,7 +1,7 @@
 'use strict';
 
 const { Emitter, CompositeDisposable } = require('event-kit');
-const PanelContainerElement = require('./panel-container-element');
+const { createPanelContainerElement } = require('./panel-container-element');
 
 module.exports = class PanelContainer {
   constructor({ location, dock, viewRegistry } = {}) {
@@ -24,7 +24,7 @@ module.exports = class PanelContainer {
 
   getElement() {
     if (!this.element) {
-      this.element = new PanelContainerElement().initialize(
+      this.element = createPanelContainerElement().initialize(
         this,
         this.viewRegistry
       );