Merge pull request #22749 from atom/migrate-to-custom-elements-styles-element

Migrate styles element to custom elements

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 = [];

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;
   }

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
+};