diff --git a/dom/base/Document.h b/dom/base/Document.h
index 78a12cf46f76..ba73133087ff 100644
--- a/dom/base/Document.h
+++ b/dom/base/Document.h
@@ -2889,6 +2889,10 @@ class Document : public nsINode,
    */
   Document* GetTemplateContentsOwner();
 
+  Document* GetTemplateContentsOwnerIfExists() const {
+    return mTemplateContentsOwner.get();
+  }
+
   /**
    * Returns true if this document is a static clone of a normal document.
    *
diff --git a/dom/base/DocumentOrShadowRoot.cpp b/dom/base/DocumentOrShadowRoot.cpp
index 647c0614e328..744d053cab8b 100644
--- a/dom/base/DocumentOrShadowRoot.cpp
+++ b/dom/base/DocumentOrShadowRoot.cpp
@@ -620,11 +620,6 @@ int32_t DocumentOrShadowRoot::StyleOrderIndexOfSheet(
   return mStyleSheets.IndexOf(&aSheet);
 }
 
-void DocumentOrShadowRoot::GetAdoptedStyleSheets(
-    nsTArray<RefPtr<StyleSheet>>& aAdoptedStyleSheets) const {
-  aAdoptedStyleSheets = mAdoptedStyleSheets.Clone();
-}
-
 void DocumentOrShadowRoot::TraverseSheetRefInStylesIfApplicable(
     StyleSheet& aSheet, nsCycleCollectionTraversalCallback& cb) {
   if (!aSheet.IsApplicable()) {
diff --git a/dom/base/DocumentOrShadowRoot.h b/dom/base/DocumentOrShadowRoot.h
index ad8f4ca8abe2..08422d317f9e 100644
--- a/dom/base/DocumentOrShadowRoot.h
+++ b/dom/base/DocumentOrShadowRoot.h
@@ -89,8 +89,6 @@ class DocumentOrShadowRoot : public RadioGroupManager {
 
   StyleSheetList* StyleSheets();
 
-  void GetAdoptedStyleSheets(nsTArray<RefPtr<StyleSheet>>&) const;
-
   void RemoveStyleSheet(StyleSheet&);
 
   Element* GetElementById(const nsAString& aElementId);
diff --git a/dom/base/ShadowRoot.cpp b/dom/base/ShadowRoot.cpp
index dea45b90e761..67fc00dbacbe 100644
--- a/dom/base/ShadowRoot.cpp
+++ b/dom/base/ShadowRoot.cpp
@@ -101,6 +101,17 @@ JSObject* ShadowRoot::WrapNode(JSContext* aCx,
   return mozilla::dom::ShadowRoot_Binding::Wrap(aCx, this, aGivenProto);
 }
 
+void ShadowRoot::NodeInfoChanged(Document* aOldDoc) {
+  DocumentFragment::NodeInfoChanged(aOldDoc);
+  Document* newDoc = OwnerDoc();
+  const bool fromOrToTemplate =
+      aOldDoc->GetTemplateContentsOwnerIfExists() == newDoc ||
+      newDoc->GetTemplateContentsOwnerIfExists() == aOldDoc;
+  if (!fromOrToTemplate) {
+    ClearAdoptedStyleSheets();
+  }
+}
+
 void ShadowRoot::CloneInternalDataFrom(ShadowRoot* aOther) {
   if (aOther->IsUAWidget()) {
     SetIsUAWidget();
diff --git a/dom/base/ShadowRoot.h b/dom/base/ShadowRoot.h
index 1fe0576c96a0..c96b1005d9f8 100644
--- a/dom/base/ShadowRoot.h
+++ b/dom/base/ShadowRoot.h
@@ -185,10 +185,7 @@ class ShadowRoot final : public DocumentFragment,
 
   JSObject* WrapNode(JSContext*, JS::Handle<JSObject*> aGivenProto) final;
 
-  void NodeInfoChanged(Document* aOldDoc) override {
-    DocumentFragment::NodeInfoChanged(aOldDoc);
-    ClearAdoptedStyleSheets();
-  }
+  void NodeInfoChanged(Document* aOldDoc) override;
 
   void AddToIdTable(Element* aElement, nsAtom* aId);
   void RemoveFromIdTable(Element* aElement, nsAtom* aId);
diff --git a/testing/web-platform/meta/css/cssom/CSSStyleSheet-template-adoption.html.ini b/testing/web-platform/meta/css/cssom/CSSStyleSheet-template-adoption.html.ini
deleted file mode 100644
index 61d8c152115e..000000000000
--- a/testing/web-platform/meta/css/cssom/CSSStyleSheet-template-adoption.html.ini
+++ /dev/null
@@ -1,4 +0,0 @@
-[CSSStyleSheet-template-adoption.html]
-  [adoptedStyleSheets won'te be cleared when adopting into/from <template>s]
-    expected: FAIL
-
diff --git a/testing/web-platform/tests/css/cssom/CSSStyleSheet-template-adoption.html b/testing/web-platform/tests/css/cssom/CSSStyleSheet-template-adoption.html
index 8fecbd83f7f9..e014627ed8be 100644
--- a/testing/web-platform/tests/css/cssom/CSSStyleSheet-template-adoption.html
+++ b/testing/web-platform/tests/css/cssom/CSSStyleSheet-template-adoption.html
@@ -13,30 +13,41 @@
 <script>
 test(function() {
   let sheet = new CSSStyleSheet();
-  sheet.replaceSync("div { color: red }");
+  sheet.replaceSync("div { color: blue }");
 
   let host = document.getElementById("host");
   let root = host.attachShadow({ mode: "open" });
+  root.innerHTML = `<div></div>`;
   root.adoptedStyleSheets = [sheet];
-  assert_equals(root.adoptedStyleSheets.length, 1);
-  assert_equals(root.adoptedStyleSheets[0], sheet);
+
+  function assertAdoptedStyleSheet() {
+    assert_equals(host.ownerDocument, root.firstChild.ownerDocument, "Shadow root was not adopted?");
+    assert_equals(root.adoptedStyleSheets.length, 1);
+    assert_equals(root.adoptedStyleSheets[0], sheet);
+    if (root.ownerDocument == document) {
+      assert_equals(getComputedStyle(root.firstChild).color, "rgb(0, 0, 255)", "Sheet should apply");
+    }
+  }
+
+  assertAdoptedStyleSheet();
 
   // adoptedStyleSheets is not cleared when adopted into a <template>.
   const template = document.getElementById("template");
   template.content.appendChild(host);
-  assert_equals(root.adoptedStyleSheets.length, 1);
-  assert_equals(root.adoptedStyleSheets[0], sheet);
+
+  assert_not_equals(host.ownerDocument, document, "Should've been adopted");
+  assertAdoptedStyleSheet();
 
   // adoptedStyleSheets is not cleared when adopted back in the main document.
   document.body.appendChild(host);
-  assert_equals(root.adoptedStyleSheets.length, 1);
-  assert_equals(root.adoptedStyleSheets[0], sheet);
+  assert_equals(host.ownerDocument, document, "Should've been re-adopted");
+  assertAdoptedStyleSheet();
 
   // adoptedStyleSheets is not cleared when adopted into a nested <template>.
   const nested_template = template.content.firstElementChild;
   nested_template.content.appendChild(host);
-  assert_equals(root.adoptedStyleSheets.length, 1);
-  assert_equals(root.adoptedStyleSheets[0], sheet);
+  assert_not_equals(host.ownerDocument, document, "Should've been adopted");
+  assertAdoptedStyleSheet();
 
   // adoptedStyleSheets is cleared when adopted into an <iframe>.
   const iframe = document.createElement("iframe");