From 79d2dec92caef6f7df33125ab34bd70e36c982c2 Mon Sep 17 00:00:00 2001
From: Anne van Kesteren <annevk@annevk.nl>
Date: Thu, 15 Feb 2024 05:34:33 -0800
Subject: [PATCH] Add shadowrootclonable and align with declarative shadow root
 changes https://bugs.webkit.org/show_bug.cgi?id=269361

Reviewed by Ryosuke Niwa.

This makes the following changes:

- Adds the new shadowrootclonable attribute to opt into a declarative
  shadow root being clonable.
- As a result, declarative shadow roots are no longer clonable by
  default. Web developers will have to explicitly opt in.
- When attachShadow() is called on a shadow host with an existing
  declarative tree, throw if mode is a mismatch.
- In attachShadow() throw first for mode being set to "user-agent" as
  this is to be caught by the binding layer in theory.
- And finally, only attach a declarative shadow root successfully for
  the first template element.

New tests are upstreamed here:
https://github.com/web-platform-tests/wpt/pull/44568

Specification changes are here (not all have landed yet as various nits
are still being addressed, but all have agreement):

- https://github.com/whatwg/html/pull/10117
- https://github.com/whatwg/html/pull/10069
- https://github.com/whatwg/dom/pull/1246

* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-name-shadow.html:
* LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-name-shadow.html:
* LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-attachment-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html:
* LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/w3c-import.log:
* LayoutTests/imported/w3c/web-platform-tests/shadow-dom/shadow-root-clonable-expected.txt:
* Source/WebCore/dom/Element.cpp:
* Source/WebCore/dom/Element.h:
* Source/WebCore/html/HTMLAttributeNames.in:
* Source/WebCore/html/HTMLTemplateElement.cpp:
(WebCore::HTMLTemplateElement::attachAsDeclarativeShadowRootIfNeeded):
* Source/WebCore/html/parser/HTMLConstructionSite.cpp:
(WebCore::HTMLConstructionSite::insertHTMLTemplateElement):

Canonical link: https://commits.webkit.org/274727@main
---
 .../css/scroll-timeline-name-shadow.html      |  13 +-
 .../css/view-timeline-name-shadow.html        |  13 +-
 ...arative-shadow-dom-attachment-expected.txt | 272 +++++-------------
 .../declarative-shadow-dom-basic-expected.txt |   4 +-
 ...larative-shadow-dom-repeats-2-expected.txt |   3 +
 .../declarative-shadow-dom-repeats-2.html     |  36 +++
 ...eclarative-shadow-dom-repeats-expected.txt |  10 +-
 .../declarative-shadow-dom-repeats.html       |  26 +-
 .../shadow-dom/declarative/w3c-import.log     |   1 +
 .../shadow-root-clonable-expected.txt         |   4 +-
 Source/WebCore/dom/Element.cpp                |  12 +-
 Source/WebCore/dom/Element.h                  |   2 +-
 Source/WebCore/html/HTMLAttributeNames.in     |   3 +-
 Source/WebCore/html/HTMLTemplateElement.cpp   |   6 +-
 .../html/parser/HTMLConstructionSite.cpp      |   5 +-
 15 files changed, 156 insertions(+), 254 deletions(-)
 create mode 100644 LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2-expected.txt
 create mode 100644 LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2.html

diff --git a/LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-name-shadow.html b/LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-name-shadow.html
index f2bea29dd3c87..a535b2a44fe80 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-name-shadow.html
+++ b/LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/scroll-timeline-name-shadow.html
@@ -6,7 +6,6 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/web-animations/testcommon.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 
 <main id=main></main>
 <script>
@@ -15,10 +14,6 @@
     main.append(template.content.cloneNode(true));
     main.offsetTop;
   }
-
-  setup(() => {
-    polyfill_declarative_shadow_dom(document);
-  });
 </script>
 <style>
   @keyframes anim {
@@ -39,7 +34,7 @@
   </style>
   <div class=scroller>
     <div class=scroller>
-      <template shadowrootmode=open>
+      <template shadowrootmode=open shadowrootclonable>
         <style>
           :host {
             scroll-timeline: --timeline y;
@@ -76,7 +71,7 @@
     }
   </style>
   <div class=host>
-    <template shadowrootmode=open>
+    <template shadowrootmode=open shadowrootclonable>
       <style>
         ::slotted(.scroller) {
           scroll-timeline: --timeline y;
@@ -113,7 +108,7 @@
     }
   </style>
   <div class=host>
-    <template shadowrootmode=open>
+    <template shadowrootmode=open shadowrootclonable>
       <style>
           /* Not using 'anim' at document scope, due to https://crbug.com/1334534 */
           @keyframes anim2 {
@@ -157,7 +152,7 @@
   </style>
   <div class=scroller>
     <div class=host>
-      <template shadowrootmode=open>
+      <template shadowrootmode=open shadowrootclonable>
         <style>
           div {
             scroll-timeline: --timeline y;
diff --git a/LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-name-shadow.html b/LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-name-shadow.html
index bb14618c00ad4..11902a3c6ebe0 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-name-shadow.html
+++ b/LayoutTests/imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-name-shadow.html
@@ -6,7 +6,6 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/web-animations/testcommon.js"></script>
-<script src="/resources/declarative-shadow-dom-polyfill.js"></script>
 
 <main id=main></main>
 <script>
@@ -15,10 +14,6 @@
     main.append(template.content.cloneNode(true));
     main.offsetTop;
   }
-
-  setup(() => {
-    polyfill_declarative_shadow_dom(document);
-  });
 </script>
 <style>
   @keyframes anim {
@@ -41,7 +36,7 @@
   <div class=scroller>
     <div>
       <div class=target>
-        <template shadowrootmode=open>
+        <template shadowrootmode=open shadowrootclonable>
           <style>
             :host {
               view-timeline: --timeline y;
@@ -78,7 +73,7 @@
   </style>
   <div class=scroller>
     <div class=host>
-      <template shadowrootmode=open>
+      <template shadowrootmode=open shadowrootclonable>
         <style>
           ::slotted(.target) {
             view-timeline: --timeline y;
@@ -114,7 +109,7 @@
     }
   </style>
   <div class=host>
-    <template shadowrootmode=open>
+    <template shadowrootmode=open shadowrootclonable>
       <style>
           /* Not using 'anim' at document scope, due to https://crbug.com/1334534 */
           @keyframes anim2 {
@@ -158,7 +153,7 @@
   </style>
   <div class=scroller>
     <div class=host>
-      <template shadowrootmode=open>
+      <template shadowrootmode=open shadowrootclonable>
         <style>
           div {
             view-timeline: --timeline y;
diff --git a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-attachment-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-attachment-expected.txt
index c7e9af5f18bc3..4fc22add32780 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-attachment-expected.txt
+++ b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-attachment-expected.txt
@@ -1,55 +1,21 @@
 
-FAIL Declarative Shadow DOM as a child of <article>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <aside>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <blockquote>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <div>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <footer>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h1>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h2>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h3>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h4>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h5>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h6>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <header>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <main>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <nav>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <p>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <section>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <span>, with mode=open, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
+PASS Declarative Shadow DOM as a child of <article>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <aside>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <blockquote>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <div>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <footer>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h1>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h2>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h3>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h4>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h5>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h6>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <header>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <main>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <nav>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <p>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <section>, with mode=open, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <span>, with mode=open, delegatesFocus=false. Should be safelisted.
 PASS Declarative Shadow DOM as a child of <a>, with mode=open, delegatesFocus=false. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <abbr>, with mode=open, delegatesFocus=false. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <address>, with mode=open, delegatesFocus=false. Should be disallowed.
@@ -141,57 +107,23 @@ PASS Declarative Shadow DOM as a child of <ul>, with mode=open, delegatesFocus=f
 PASS Declarative Shadow DOM as a child of <var>, with mode=open, delegatesFocus=false. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <video>, with mode=open, delegatesFocus=false. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <wbr>, with mode=open, delegatesFocus=false. Should be disallowed.
-FAIL Declarative Shadow DOM as a child of <article>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <aside>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <blockquote>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <div>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <footer>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h1>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h2>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h3>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h4>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h5>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h6>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <header>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <main>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <nav>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <p>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <section>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <span>, with mode=closed, delegatesFocus=false. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
+PASS Declarative Shadow DOM as a child of <article>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <aside>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <blockquote>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <div>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <footer>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h1>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h2>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h3>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h4>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h5>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h6>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <header>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <main>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <nav>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <p>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <section>, with mode=closed, delegatesFocus=false. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <span>, with mode=closed, delegatesFocus=false. Should be safelisted.
 PASS Declarative Shadow DOM as a child of <a>, with mode=closed, delegatesFocus=false. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <abbr>, with mode=closed, delegatesFocus=false. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <address>, with mode=closed, delegatesFocus=false. Should be disallowed.
@@ -391,57 +323,23 @@ PASS Declarative Shadow DOM as a child of <ul>, with mode=invalid, delegatesFocu
 PASS Declarative Shadow DOM as a child of <var>, with mode=invalid, delegatesFocus=false. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <video>, with mode=invalid, delegatesFocus=false. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <wbr>, with mode=invalid, delegatesFocus=false. Should be disallowed.
-FAIL Declarative Shadow DOM as a child of <article>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <aside>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <blockquote>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <div>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <footer>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h1>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h2>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h3>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h4>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h5>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h6>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <header>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <main>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <nav>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <p>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <section>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <span>, with mode=open, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
+PASS Declarative Shadow DOM as a child of <article>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <aside>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <blockquote>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <div>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <footer>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h1>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h2>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h3>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h4>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h5>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h6>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <header>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <main>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <nav>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <p>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <section>, with mode=open, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <span>, with mode=open, delegatesFocus=true. Should be safelisted.
 PASS Declarative Shadow DOM as a child of <a>, with mode=open, delegatesFocus=true. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <abbr>, with mode=open, delegatesFocus=true. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <address>, with mode=open, delegatesFocus=true. Should be disallowed.
@@ -533,57 +431,23 @@ PASS Declarative Shadow DOM as a child of <ul>, with mode=open, delegatesFocus=t
 PASS Declarative Shadow DOM as a child of <var>, with mode=open, delegatesFocus=true. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <video>, with mode=open, delegatesFocus=true. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <wbr>, with mode=open, delegatesFocus=true. Should be disallowed.
-FAIL Declarative Shadow DOM as a child of <article>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <aside>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <blockquote>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <div>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <footer>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h1>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h2>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h3>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h4>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h5>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <h6>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <header>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <main>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <nav>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <p>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <section>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
-FAIL Declarative Shadow DOM as a child of <span>, with mode=closed, delegatesFocus=true. Should be safelisted. assert_throws_dom: Calling attachShadow with a declarative shadow fails if the mode doesn't match function "() => {
-        element.attachShadow({mode: oppositeMode});
-      }" did not throw
+PASS Declarative Shadow DOM as a child of <article>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <aside>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <blockquote>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <div>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <footer>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h1>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h2>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h3>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h4>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h5>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <h6>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <header>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <main>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <nav>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <p>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <section>, with mode=closed, delegatesFocus=true. Should be safelisted.
+PASS Declarative Shadow DOM as a child of <span>, with mode=closed, delegatesFocus=true. Should be safelisted.
 PASS Declarative Shadow DOM as a child of <a>, with mode=closed, delegatesFocus=true. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <abbr>, with mode=closed, delegatesFocus=true. Should be disallowed.
 PASS Declarative Shadow DOM as a child of <address>, with mode=closed, delegatesFocus=true. Should be disallowed.
diff --git a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic-expected.txt
index 224d45994d78e..a2fa705cb3f1a 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic-expected.txt
+++ b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic-expected.txt
@@ -8,8 +8,8 @@ PASS Declarative Shadow DOM: Invalid shadow root attribute
 PASS Declarative Shadow DOM: Closed shadow root attribute
 PASS Declarative Shadow DOM: Missing closing tag
 PASS Declarative Shadow DOM: delegates focus attribute
-FAIL Declarative Shadow DOM: clonable attribute assert_false: clonable should be false without the shadowrootclonable attribute expected false got true
-FAIL Declarative Shadow DOM: Multiple roots assert_true: The second (duplicate) template should be left in the DOM expected true got false
+PASS Declarative Shadow DOM: clonable attribute
+PASS Declarative Shadow DOM: Multiple roots
 PASS Declarative Shadow DOM: template containing declarative shadow root (with shadowrootclonable)
 PASS Declarative Shadow DOM: template containing (deeply nested) declarative shadow root
 PASS Declarative Shadow DOM: template containing a template containing declarative shadow root
diff --git a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2-expected.txt
new file mode 100644
index 0000000000000..333b2e8a01881
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2-expected.txt
@@ -0,0 +1,3 @@
+
+PASS Repeated declarative shadow roots keep only the first
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2.html b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2.html
new file mode 100644
index 0000000000000..74b14b8d8ff67
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>Duplicate declarative shadow trees</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+
+<div id=multiple1>
+  <template shadowrootmode=open>1</template>
+  <template shadowrootmode=open>2</template>
+  <template shadowrootmode=open>3</template>
+</div>
+
+<div id=multiple2>
+  <template shadowrootmode=closed>1</template>
+  <template shadowrootmode=closed>2</template>
+  <template shadowrootmode=open>3</template>
+</div>
+
+<script>
+test((t) => {
+  t.add_cleanup(() => {
+    multiple1.remove();
+    multiple2.remove();
+  });
+  let shadow = multiple1.shadowRoot;
+  assert_true(!!shadow,'Remaining shadow root should be open');
+  assert_equals(shadow.textContent,"1");
+  assert_equals(multiple1.childElementCount, 2);
+  assert_equals(multiple1.firstElementChild.content.textContent, "2");
+  assert_equals(multiple1.lastElementChild.content.textContent, "3");
+  shadow = multiple2.shadowRoot;
+  assert_false(!!shadow,'Remaining shadow root should be closed');
+  assert_equals(multiple2.childElementCount, 2);
+  assert_equals(multiple2.firstElementChild.content.textContent, "2");
+  assert_equals(multiple2.lastElementChild.content.textContent, "3");
+},'Repeated declarative shadow roots keep only the first');
+</script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-expected.txt
index de7bb24703aee..466284d00624c 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-expected.txt
+++ b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-expected.txt
@@ -1,9 +1,5 @@
 
-FAIL Repeated declarative shadow roots keep only the first assert_equals: expected "Open" but got "Closed"
-FAIL Calling attachShadow() on declarative shadow root must match type assert_throws_dom: Mismatched shadow root type should throw function "() => {
-    open1.attachShadow({mode: "closed"});
-  }" did not throw
-FAIL Calling attachShadow() on declarative shadow root must match all parameters assert_throws_dom: Mismatched shadow root type should throw function "() => {
-    open2.attachShadow({mode: "closed", delegatesFocus: true, slotAssignment: "named", clonable: true});
-  }" did not throw
+PASS Repeated declarative shadow roots keep only the first
+PASS Calling attachShadow() on declarative shadow root must match type
+PASS Calling attachShadow() on declarative shadow root must match all parameters
 
diff --git a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html
index 69f5c0f077afb..4f1b4c748e8b7 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html
+++ b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html
@@ -22,13 +22,19 @@
 
 <script>
 test((t) => {
+  t.add_cleanup(() => {
+    multiple1.remove();
+    multiple2.remove();
+  });
   let shadow = multiple1.shadowRoot;
   assert_true(!!shadow,'Remaining shadow root should be open');
   assert_equals(shadow.textContent,"Open");
+  assert_equals(multiple1.childElementCount, 1);
+  assert_equals(multiple1.firstElementChild.shadowRootMode, "closed");
   shadow = multiple2.shadowRoot;
   assert_false(!!shadow,'Remaining shadow root should be closed');
-  multiple1.remove(); // Cleanup
-  multiple2.remove();
+  assert_equals(multiple2.childElementCount, 1);
+  assert_equals(multiple2.firstElementChild.shadowRootMode, "open");
 },'Repeated declarative shadow roots keep only the first');
 </script>
 
@@ -59,20 +65,16 @@
 test((t) => {
   assert_throws_dom("NotSupportedError",() => {
     open2.attachShadow({mode: "closed", delegatesFocus: true, slotAssignment: "named", clonable: true});
-  },'Mismatched shadow root type should throw');
-  assert_throws_dom("NotSupportedError",() => {
-    open2.attachShadow({mode: "open", delegatesFocus: false, slotAssignment: "named", clonable: true});
-  },'Mismatched shadow root delegatesFocus should throw');
-  assert_throws_dom("NotSupportedError",() => {
-    open2.attachShadow({mode: "open", delegatesFocus: true, slotAssignment: "manual", clonable: true});
-  },'Mismatched shadow root slotAssignment should throw');
-  assert_throws_dom("NotSupportedError",() => {
-    open2.attachShadow({mode: "open", delegatesFocus: true, slotAssignment: "named", clonable: false});
-  },'Mismatched shadow root clonable should throw');
+  },'Mismatched shadow root mode should throw');
 
   const initialShadow = open2.shadowRoot;
   const shadow = open2.attachShadow({mode: "open", delegatesFocus: true, slotAssignment: "named", clonable: true}); // Shouldn't throw
   assert_equals(shadow,initialShadow,'Same shadow should be returned');
   assert_equals(shadow.textContent,'','Shadow should be empty');
+
+  assert_throws_dom("NotSupportedError",() => {
+    open2.attachShadow({mode: "open"});
+  },'Invoking attachShadow() on a non-declarative shadow root should throw');
+
 },'Calling attachShadow() on declarative shadow root must match all parameters');
 </script>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/w3c-import.log
index c272aa9cc4044..e707188a0b1b4 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/w3c-import.log
+++ b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/w3c-import.log
@@ -20,6 +20,7 @@ List of files:
 /LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-available-to-element-internals.html
 /LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-basic.html
 /LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-opt-in.html
+/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats-2.html
 /LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-shadow-dom-repeats.html
 /LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/declarative-with-disabled-shadow.html
 /LayoutTests/imported/w3c/web-platform-tests/shadow-dom/declarative/gethtml.tentative.html
diff --git a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/shadow-root-clonable-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/shadow-root-clonable-expected.txt
index f8fbfb85c8a50..46c7c2fdac0a5 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/shadow-root-clonable-expected.txt
+++ b/LayoutTests/imported/w3c/web-platform-tests/shadow-dom/shadow-root-clonable-expected.txt
@@ -2,7 +2,7 @@
 FAIL attachShadow with clonable: true null is not an object (evaluating 'shallowClonedRoot.clonable')
 PASS attachShadow with clonable: false
 PASS attachShadow with clonable: undefined
-FAIL declarative shadow roots do *not* get clonable: true automatically assert_false: clonable is *not* automatically true for declarative shadow root expected false got true
+PASS declarative shadow roots do *not* get clonable: true automatically
 PASS declarative shadow roots can opt in to clonable with shadowrootclonable
-FAIL declarative shadow roots inside templates do *not* get cloned automatically assert_true: no shadow root gets cloned expected true got false
+PASS declarative shadow roots inside templates do *not* get cloned automatically
 
diff --git a/Source/WebCore/dom/Element.cpp b/Source/WebCore/dom/Element.cpp
index f06eec4b8c23c..a55f967d8766c 100644
--- a/Source/WebCore/dom/Element.cpp
+++ b/Source/WebCore/dom/Element.cpp
@@ -2946,10 +2946,14 @@ static bool canAttachAuthorShadowRoot(const Element& element)
 
 ExceptionOr<ShadowRoot&> Element::attachShadow(const ShadowRootInit& init)
 {
+    if (init.mode == ShadowRootMode::UserAgent)
+        return Exception { ExceptionCode::TypeError };
     if (!canAttachAuthorShadowRoot(*this))
         return Exception { ExceptionCode::NotSupportedError };
     if (RefPtr shadowRoot = this->shadowRoot()) {
         if (shadowRoot->isDeclarativeShadowRoot()) {
+            if (init.mode != shadowRoot->mode())
+                return Exception { ExceptionCode::NotSupportedError };
             ChildListMutationScope mutation(*shadowRoot);
             shadowRoot->removeChildren();
             shadowRoot->setIsDeclarativeShadowRoot(false);
@@ -2957,8 +2961,6 @@ ExceptionOr<ShadowRoot&> Element::attachShadow(const ShadowRootInit& init)
         }
         return Exception { ExceptionCode::NotSupportedError };
     }
-    if (init.mode == ShadowRootMode::UserAgent)
-        return Exception { ExceptionCode::TypeError };
     Ref shadow = ShadowRoot::create(document(), init.mode, init.slotAssignment,
         init.delegatesFocus ? ShadowRoot::DelegatesFocus::Yes : ShadowRoot::DelegatesFocus::No,
         init.clonable ? ShadowRoot::Clonable::Yes : ShadowRoot::Clonable::No,
@@ -2967,9 +2969,11 @@ ExceptionOr<ShadowRoot&> Element::attachShadow(const ShadowRootInit& init)
     return shadow.get();
 }
 
-ExceptionOr<ShadowRoot&> Element::attachDeclarativeShadow(ShadowRootMode mode, bool delegatesFocus)
+ExceptionOr<ShadowRoot&> Element::attachDeclarativeShadow(ShadowRootMode mode, bool delegatesFocus, bool clonable)
 {
-    auto exceptionOrShadowRoot = attachShadow({ mode, delegatesFocus, /* clonable */ true });
+    if (this->shadowRoot())
+        return Exception { ExceptionCode::NotSupportedError };
+    auto exceptionOrShadowRoot = attachShadow({ mode, delegatesFocus, clonable });
     if (exceptionOrShadowRoot.hasException())
         return exceptionOrShadowRoot.releaseException();
     Ref shadowRoot = exceptionOrShadowRoot.releaseReturnValue();
diff --git a/Source/WebCore/dom/Element.h b/Source/WebCore/dom/Element.h
index db2b02532d624..8f180a18a389b 100644
--- a/Source/WebCore/dom/Element.h
+++ b/Source/WebCore/dom/Element.h
@@ -362,7 +362,7 @@ class Element : public ContainerNode {
     RefPtr<ShadowRoot> shadowRootForBindings(JSC::JSGlobalObject&) const;
 
     WEBCORE_EXPORT ExceptionOr<ShadowRoot&> attachShadow(const ShadowRootInit&);
-    ExceptionOr<ShadowRoot&> attachDeclarativeShadow(ShadowRootMode, bool delegatesFocus);
+    ExceptionOr<ShadowRoot&> attachDeclarativeShadow(ShadowRootMode, bool delegatesFocus, bool clonable);
 
     ShadowRoot* userAgentShadowRoot() const;
     RefPtr<ShadowRoot> protectedUserAgentShadowRoot() const;
diff --git a/Source/WebCore/html/HTMLAttributeNames.in b/Source/WebCore/html/HTMLAttributeNames.in
index 23ac91735c128..dc81afe2f24bf 100644
--- a/Source/WebCore/html/HTMLAttributeNames.in
+++ b/Source/WebCore/html/HTMLAttributeNames.in
@@ -385,8 +385,9 @@ scrolldelay
 scrolling
 select
 selected
-shadowrootmode
+shadowrootclonable
 shadowrootdelegatesfocus
+shadowrootmode
 shape
 size
 sizes
diff --git a/Source/WebCore/html/HTMLTemplateElement.cpp b/Source/WebCore/html/HTMLTemplateElement.cpp
index 354e21687ea30..7e1f813da8d4b 100644
--- a/Source/WebCore/html/HTMLTemplateElement.cpp
+++ b/Source/WebCore/html/HTMLTemplateElement.cpp
@@ -154,9 +154,11 @@ void HTMLTemplateElement::attachAsDeclarativeShadowRootIfNeeded(Element& host)
     if (!mode)
         return;
 
-    bool delegatesFocus = hasAttributeWithoutSynchronization(HTMLNames::shadowrootdelegatesfocusAttr);
+    auto delegatesFocus = hasAttributeWithoutSynchronization(HTMLNames::shadowrootdelegatesfocusAttr);
 
-    auto exceptionOrShadowRoot = host.attachDeclarativeShadow(*mode, delegatesFocus);
+    auto clonable = hasAttributeWithoutSynchronization(HTMLNames::shadowrootclonableAttr);
+
+    auto exceptionOrShadowRoot = host.attachDeclarativeShadow(*mode, delegatesFocus, clonable);
     if (exceptionOrShadowRoot.hasException())
         return;
 
diff --git a/Source/WebCore/html/parser/HTMLConstructionSite.cpp b/Source/WebCore/html/parser/HTMLConstructionSite.cpp
index 423c48160317c..e86a13220c2b2 100644
--- a/Source/WebCore/html/parser/HTMLConstructionSite.cpp
+++ b/Source/WebCore/html/parser/HTMLConstructionSite.cpp
@@ -544,6 +544,7 @@ void HTMLConstructionSite::insertHTMLTemplateElement(AtomHTMLToken&& token)
 {
     if (document().settings().declarativeShadowRootsEnabled() && m_parserContentPolicy.contains(ParserContentPolicy::AllowDeclarativeShadowRoots)) {
         std::optional<ShadowRootMode> mode;
+        bool clonable = false;
         bool delegatesFocus = false;
         for (auto& attribute : token.attributes()) {
             if (attribute.name() == HTMLNames::shadowrootmodeAttr) {
@@ -553,9 +554,11 @@ void HTMLConstructionSite::insertHTMLTemplateElement(AtomHTMLToken&& token)
                     mode = ShadowRootMode::Open;
             } else if (attribute.name() == HTMLNames::shadowrootdelegatesfocusAttr)
                 delegatesFocus = true;
+            else if (attribute.name() == HTMLNames::shadowrootclonableAttr)
+                clonable = true;
         }
         if (mode && is<Element>(currentNode())) {
-            auto exceptionOrShadowRoot = currentElement().attachDeclarativeShadow(*mode, delegatesFocus);
+            auto exceptionOrShadowRoot = currentElement().attachDeclarativeShadow(*mode, delegatesFocus, clonable);
             if (!exceptionOrShadowRoot.hasException()) {
                 Ref shadowRoot = exceptionOrShadowRoot.releaseReturnValue();
                 auto element = createHTMLElement(token);