Merge pull request #22755 from atom/use-custom-element-workspace-element

Use custom element on workspace-element

src/workspace-element.js

@@ -8,13 +8,13 @@ const scrollbarStyle = require('scrollbar-style');
 const _ = require('underscore-plus');
 
 class WorkspaceElement extends HTMLElement {
-  attachedCallback() {
+  connectedCallback() {
     this.focus();
     this.htmlElement = document.querySelector('html');
     this.htmlElement.addEventListener('mouseleave', this.handleCenterLeave);
   }
 
-  detachedCallback() {
+  disconnectedCallback() {
     this.subscriptions.dispose();
     this.htmlElement.removeEventListener('mouseleave', this.handleCenterLeave);
   }
@@ -466,10 +466,6 @@ class WorkspaceElement extends HTMLElement {
   }
 }
 
-module.exports = document.registerElement('atom-workspace', {
-  prototype: WorkspaceElement.prototype
-});
-
 function isTab(element) {
   let el = element;
   while (el != null) {
@@ -478,3 +474,13 @@ function isTab(element) {
   }
   return false;
 }
+
+window.customElements.define('atom-workspace', WorkspaceElement);
+
+function createWorkspaceElement() {
+  return document.createElement('atom-workspace');
+}
+
+module.exports = {
+  createWorkspaceElement
+};

src/workspace.js

@@ -15,7 +15,7 @@ const Panel = require('./panel');
 const PanelContainer = require('./panel-container');
 const Task = require('./task');
 const WorkspaceCenter = require('./workspace-center');
-const WorkspaceElement = require('./workspace-element');
+const { createWorkspaceElement } = require('./workspace-element');
 
 const STOPPED_CHANGING_ACTIVE_PANE_ITEM_DELAY = 100;
 const ALL_LOCATIONS = ['center', 'left', 'right', 'bottom'];
@@ -267,7 +267,7 @@ module.exports = class Workspace extends Model {
 
   getElement() {
     if (!this.element) {
-      this.element = new WorkspaceElement().initialize(this, {
+      this.element = createWorkspaceElement().initialize(this, {
         config: this.config,
         project: this.project,
         viewRegistry: this.viewRegistry,