Use a DOMLocalization instance separate from document.l10n

customElement.js

/* 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/. */

"use strict";

// This is loaded into all XUL windows. Wrap in a block to prevent
// leaking to window scope.
{
  const { RemoteL10n } = ChromeUtils.import(
    "resource://activity-stream/lib/RemoteL10n.jsm"
  );
  class MozTextParagraph extends HTMLElement {
    constructor() {
      super();

      this._content = null;
    }

    async render() {
      if (this.hasAttribute("fluent-remote-id") && this._content) {
        RemoteL10n.l10n.setAttributes(
          this._content,
          this.getAttribute("fluent-remote-id")
        );
      }
    }

    static get observedAttributes() {
      return ["fluent-remote-id"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
      this.render();
    }

    connectedCallback() {
      if (this.shadowRoot) {
        this.render();
        return;
      }

      const shadowRoot = this.attachShadow({ mode: "open" });
      RemoteL10n.l10n.connectRoot(shadowRoot);
      shadowRoot.appendChild(document.createElement("div"));

      this._content = shadowRoot.querySelector("div");

      this.render();
    }
  }

  customElements.define("remote-text", MozTextParagraph);
}