From 80888a979e85b2a87304d720e45f8a9464dd12aa Mon Sep 17 00:00:00 2001
From: sadick254 <sadickjunior@gmail.com>
Date: Tue, 20 Jul 2021 16:55:39 +0300
Subject: [PATCH] Migrate to custom elements

document.registerElement will be deprecated which will make moving to
later electrons imposible.
---
 spec/styles-element-spec.js |  4 ++--
 src/style-manager.js        |  4 ++--
 src/styles-element.js       | 32 +++++++++++++++++++-------------
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/spec/styles-element-spec.js b/spec/styles-element-spec.js
index effe1443eaa..7c3a9aaa59a 100644
--- a/spec/styles-element-spec.js
+++ b/spec/styles-element-spec.js
@@ -1,4 +1,4 @@
-const StylesElement = require('../src/styles-element');
+const { createStylesElement } = require('../src/styles-element');
 
 describe('StylesElement', function() {
   let [
@@ -9,7 +9,7 @@ describe('StylesElement', function() {
   ] = [];
 
   beforeEach(function() {
-    element = new StylesElement();
+    element = createStylesElement();
     element.initialize(atom.styles);
     document.querySelector('#jasmine-content').appendChild(element);
     addedStyleElements = [];
diff --git a/src/style-manager.js b/src/style-manager.js
index 83cb23ff0eb..fa4d3798126 100644
--- a/src/style-manager.js
+++ b/src/style-manager.js
@@ -4,7 +4,7 @@ const fs = require('fs-plus');
 const path = require('path');
 const postcss = require('postcss');
 const selectorParser = require('postcss-selector-parser');
-const StylesElement = require('./styles-element');
+const { createStylesElement } = require('./styles-element');
 const DEPRECATED_SYNTAX_SELECTORS = require('./deprecated-syntax-selectors');
 
 // Extended: A singleton instance of this class available via `atom.styles`,
@@ -254,7 +254,7 @@ module.exports = class StyleManager {
   }
 
   buildStylesElement() {
-    const stylesElement = new StylesElement();
+    const stylesElement = createStylesElement();
     stylesElement.initialize(this);
     return stylesElement;
   }
diff --git a/src/styles-element.js b/src/styles-element.js
index 6073717ba6e..94c287dc036 100644
--- a/src/styles-element.js
+++ b/src/styles-element.js
@@ -3,7 +3,9 @@ const { Emitter, CompositeDisposable } = require('event-kit');
 class StylesElement extends HTMLElement {
   constructor() {
     super();
-    this.subscriptions = null;
+    this.subscriptions = new CompositeDisposable();
+    this.emitter = new Emitter();
+    this.styleElementClonesByOriginalElement = new WeakMap();
     this.context = null;
   }
 
@@ -19,23 +21,21 @@ class StylesElement extends HTMLElement {
     this.emitter.on('did-update-style-element', callback);
   }
 
-  createdCallback() {
-    this.subscriptions = new CompositeDisposable();
-    this.emitter = new Emitter();
-    this.styleElementClonesByOriginalElement = new WeakMap();
-  }
-
-  attachedCallback() {
+  connectedCallback() {
     let left;
     this.context =
       (left = this.getAttribute('context')) != null ? left : undefined;
   }
 
-  detachedCallback() {
+  disconnectedCallback() {
     this.subscriptions.dispose();
     this.subscriptions = new CompositeDisposable();
   }
 
+  static get observedAttributes() {
+    return ['context'];
+  }
+
   attributeChangedCallback(attrName) {
     if (attrName === 'context') {
       return this.contextChanged();
@@ -58,7 +58,7 @@ class StylesElement extends HTMLElement {
         this.styleElementRemoved.bind(this)
       )
     );
-    return this.subscriptions.add(
+    this.subscriptions.add(
       this.styleManager.onDidUpdateStyleElement(
         this.styleElementUpdated.bind(this)
       )
@@ -140,6 +140,12 @@ class StylesElement extends HTMLElement {
   }
 }
 
-module.exports = document.registerElement('atom-styles', {
-  prototype: StylesElement.prototype
-});
+window.customElements.define('atom-styles', StylesElement);
+
+function createStylesElement() {
+  return document.createElement('atom-styles');
+}
+
+module.exports = {
+  createStylesElement
+};