Update method of custom web element registering

app/assets/javascripts/behaviors/gl_emoji.js

-import installCustomElements from 'document-register-element';
+import 'document-register-element';
 import isEmojiUnicodeSupported from '../emoji/support';
 
-installCustomElements(window);
-
 export default function installGlEmojiElement() {
-  const GlEmojiElementProto = Object.create(HTMLElement.prototype);
-  GlEmojiElementProto.createdCallback = function createdCallback() {
-    const emojiUnicode = this.textContent.trim();
-    const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
+  if (!customElements.get('gl-emoji')) {
+    customElements.define(
+      'gl-emoji',
+      class extends HTMLElement {
+        constructor() {
+          super();
 
-    const isEmojiUnicode =
-      this.childNodes &&
-      Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
-    const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
-    const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
+          const emojiUnicode = this.textContent.trim();
+          const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
 
-    if (emojiUnicode && isEmojiUnicode && !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)) {
-      // CSS sprite fallback takes precedence over image fallback
-      if (hasCssSpriteFalback) {
-        if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
-          const emojiSpriteLinkTag = document.createElement('link');
-          emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
-          emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
-          document.head.appendChild(emojiSpriteLinkTag);
-          gon.emoji_sprites_css_added = true;
-        }
-        // IE 11 doesn't like adding multiple at once :(
-        this.classList.add('emoji-icon');
-        this.classList.add(fallbackSpriteClass);
-      } else {
-        import(/* webpackChunkName: 'emoji' */ '../emoji')
-          .then(({ emojiImageTag, emojiFallbackImageSrc }) => {
-            if (hasImageFallback) {
-              this.innerHTML = emojiImageTag(name, fallbackSrc);
+          const isEmojiUnicode =
+            this.childNodes &&
+            Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
+          const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
+          const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
+
+          if (
+            emojiUnicode &&
+            isEmojiUnicode &&
+            !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
+          ) {
+            // CSS sprite fallback takes precedence over image fallback
+            if (hasCssSpriteFalback) {
+              if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
+                const emojiSpriteLinkTag = document.createElement('link');
+                emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
+                emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
+                document.head.appendChild(emojiSpriteLinkTag);
+                gon.emoji_sprites_css_added = true;
+              }
+              // IE 11 doesn't like adding multiple at once :(
+              this.classList.add('emoji-icon');
+              this.classList.add(fallbackSpriteClass);
             } else {
-              const src = emojiFallbackImageSrc(name);
-              this.innerHTML = emojiImageTag(name, src);
+              import(/* webpackChunkName: 'emoji' */ '../emoji')
+                .then(({ emojiImageTag, emojiFallbackImageSrc }) => {
+                  if (hasImageFallback) {
+                    this.innerHTML = emojiImageTag(name, fallbackSrc);
+                  } else {
+                    const src = emojiFallbackImageSrc(name);
+                    this.innerHTML = emojiImageTag(name, src);
+                  }
+                })
+                .catch(() => {
+                  // do nothing
+                });
             }
-          })
-          .catch(() => {
-            // do nothing
-          });
-      }
-    }
-  };
-
-  document.registerElement('gl-emoji', {
-    prototype: GlEmojiElementProto,
-  });
+          }
+        }
+      },
+    );
+  }
 }

package.json

@@ -60,7 +60,7 @@
     "dateformat": "^3.0.3",
     "deckar01-task_list": "^2.2.0",
     "diff": "^3.4.0",
-    "document-register-element": "1.3.0",
+    "document-register-element": "1.13.1",
     "dropzone": "^4.2.0",
     "echarts": "^4.2.0-rc.2",
     "emoji-regex": "^7.0.3",

yarn.lock

@@ -3264,10 +3264,12 @@ doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
-document-register-element@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/document-register-element/-/document-register-element-1.3.0.tgz#fb3babb523c74662be47be19c6bc33e71990d940"
-  integrity sha1-+zurtSPHRmK+R74Zxrwz5xmQ2UA=
+document-register-element@1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/document-register-element/-/document-register-element-1.13.1.tgz#dad8cb7be38e04ee3f56842e6cf81af46c1249ba"
+  integrity sha512-92ZyLDKg9j4rOll//NNXj25f+8rAzOkYsGJonhugKwXfeqH7bzs8Ucpvey0WzZ2ZzKdrvW9RnUw3UyOZ/uhBFw==
+  dependencies:
+    lightercollective "^0.1.0"
 
 dom-serialize@^2.2.0:
   version "2.2.1"