1 files changed, 50 insertions, 0 deletions
diff --git a/comm/mail/components/accountcreation/views/container.mjs b/comm/mail/components/accountcreation/views/container.mjs
new file mode 100644
index 0000000000..3bf8d9b4dc
--- /dev/null
+++ b/comm/mail/components/accountcreation/views/container.mjs
@@ -0,0 +1,50 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * Custom Element containing the main account hub dialog. Used to append the
+ * needed CSS files to the shadowDom to prevent style leakage.
+ * NOTE: This could directly extend an HTMLDialogElement if it had a shadowRoot.
+ */
+class AccountHubContainer extends HTMLElement {
+  /** @type {HTMLDialogElement} */
+  modal;
+
+  /** @type {DOMLocalization} */
+  l10n;
+
+  connectedCallback() {
+    if (this.shadowRoot) {
+      // Already connected, no need to run it again.
+      return;
+    }
+
+    const shadowRoot = this.attachShadow({ mode: "open" });
+
+    // Load styles in the shadowRoot so we don't leak it.
+    let style = document.createElement("link");
+    style.rel = "stylesheet";
+    style.href = "chrome://messenger/skin/accountHub.css";
+    shadowRoot.appendChild(style);
+
+    let template = document.getElementById("accountHubDialog");
+    let clonedNode = template.content.cloneNode(true);
+    shadowRoot.appendChild(clonedNode);
+    this.modal = shadowRoot.querySelector("dialog");
+
+    // We need to create an internal DOM localization in order to let fluent
+    // see the IDs inside our shadowRoot.
+    this.l10n = new DOMLocalization([
+      "branding/brand.ftl",
+      "messenger/accountcreation/accountHub.ftl",
+      "messenger/accountcreation/accountSetup.ftl",
+    ]);
+    this.l10n.connectRoot(shadowRoot);
+  }
+
+  disconnectedCallback() {
+    this.l10n.disconnectRoot(this.shadowRoot);
+  }
+}
+customElements.define("account-hub-container", AccountHubContainer);