Use connectedCallback to initialise GlEmoji

Attributes may not be available in the constructor.
This causes problems, as data attributes,
like emoji name, may not be available when we need them.
Race conditions may be present which means emojis
may not render.

This commit uses the connectedCallback,
which will ensure the element has been mounted to the DOM
before we initialize the emoji.

app/assets/javascripts/behaviors/gl_emoji.js

@@ -3,9 +3,7 @@ import isEmojiUnicodeSupported from '../emoji/support';
 import { initEmojiMap, getEmojiInfo, emojiFallbackImageSrc, emojiImageTag } from '../emoji';
 
 class GlEmoji extends HTMLElement {
-  constructor() {
-    super();
-
+  connectedCallback() {
     this.initialize();
   }
   initialize() {

changelogs/unreleased/fix-gl-emoji-race-condition.yml

+---
+title: Fix emoji rendering in certain edge cases
+merge_request: 44542
+author:
+type: fixed