diff --git a/toolkit/components/certviewer/content/components/certificate-section.mjs b/toolkit/components/certviewer/content/components/certificate-section.mjs
index 464232c0894d..c35c18736f85 100644
--- a/toolkit/components/certviewer/content/components/certificate-section.mjs
+++ b/toolkit/components/certviewer/content/components/certificate-section.mjs
@@ -14,13 +14,15 @@ class CertificateSection extends HTMLElement {
   }
 
   connectedCallback() {
+    // Attach and connect before adding the template, or fluent
+    // won't translate the template copy we insert into the
+    // shadowroot.
+    this.attachShadow({ mode: "open" });
+    document.l10n.connectRoot(this.shadowRoot);
+
     let template = document.getElementById("certificate-section-template");
     let templateHtml = template.content.cloneNode(true);
-
-    this.attachShadow({ mode: "open" }).appendChild(templateHtml);
-
-    document.l10n.connectRoot(this.shadowRoot);
-    document.l10n.translateFragment(this.shadowRoot);
+    this.shadowRoot.appendChild(templateHtml);
 
     this.certificateTabsSection = new CertificateTabsSection();
     this.shadowRoot.appendChild(this.certificateTabsSection.tabsElement);
diff --git a/toolkit/components/certviewer/content/components/info-group.mjs b/toolkit/components/certviewer/content/components/info-group.mjs
index 33ad773d4da8..0f059958cc90 100644
--- a/toolkit/components/certviewer/content/components/info-group.mjs
+++ b/toolkit/components/certviewer/content/components/info-group.mjs
@@ -14,12 +14,14 @@ export class InfoGroup extends HTMLElement {
   }
 
   connectedCallback() {
-    let infoGroupTemplate = document.getElementById("info-group-template");
-    this.attachShadow({ mode: "open" }).appendChild(
-      infoGroupTemplate.content.cloneNode(true)
-    );
+    // Attach and connect before adding the template, or fluent
+    // won't translate the template copy we insert into the
+    // shadowroot.
+    this.attachShadow({ mode: "open" });
     document.l10n.connectRoot(this.shadowRoot);
-    document.l10n.translateFragment(this.shadowRoot);
+
+    let infoGroupTemplate = document.getElementById("info-group-template");
+    this.shadowRoot.appendChild(infoGroupTemplate.content.cloneNode(true));
     this.render();
   }
 
diff --git a/toolkit/components/certviewer/content/components/info-item.mjs b/toolkit/components/certviewer/content/components/info-item.mjs
index c8ae94c782c3..1f9b99f8130b 100644
--- a/toolkit/components/certviewer/content/components/info-item.mjs
+++ b/toolkit/components/certviewer/content/components/info-item.mjs
@@ -11,14 +11,14 @@ export class InfoItem extends HTMLElement {
   }
 
   connectedCallback() {
-    let infoItemTemplate = document.getElementById("info-item-template");
-
-    this.attachShadow({ mode: "open" }).appendChild(
-      infoItemTemplate.content.cloneNode(true)
-    );
-
+    // Attach and connect before adding the template, or fluent
+    // won't translate the template copy we insert into the
+    // shadowroot.
+    this.attachShadow({ mode: "open" });
     document.l10n.connectRoot(this.shadowRoot);
-    document.l10n.translateFragment(this.shadowRoot);
+
+    let infoItemTemplate = document.getElementById("info-item-template");
+    this.shadowRoot.appendChild(infoItemTemplate.content.cloneNode(true));
 
     this.render();
   }
diff --git a/toolkit/components/certviewer/content/components/list-item.mjs b/toolkit/components/certviewer/content/components/list-item.mjs
index 820e8f964be8..723eed05ab0b 100644
--- a/toolkit/components/certviewer/content/components/list-item.mjs
+++ b/toolkit/components/certviewer/content/components/list-item.mjs
@@ -11,15 +11,15 @@ export class ListItem extends HTMLElement {
   }
 
   connectedCallback() {
-    let ListItemTemplate = document.getElementById("list-item-template");
-
-    this.attachShadow({ mode: "open" }).appendChild(
-      ListItemTemplate.content.cloneNode(true)
-    );
-
-    document.l10n.translateFragment(this.shadowRoot);
+    // Attach and connect before adding the template, or fluent
+    // won't translate the template copy we insert into the
+    // shadowroot.
+    this.attachShadow({ mode: "open" });
     document.l10n.connectRoot(this.shadowRoot);
 
+    let ListItemTemplate = document.getElementById("list-item-template");
+    this.shadowRoot.appendChild(ListItemTemplate.content.cloneNode(true));
+
     this.render();
   }