Declarative Shadow DOM should be exposed in ElementInternals.shadowRoot

https://bugs.webkit.org/show_bug.cgi?id=249523 Reviewed by Chris Dumez. Expose the declarative shadow DOM in ElementInternals.prototype.shadowRoot. * LayoutTests/fast/shadow-dom/element-internals-exposes-declarative-shadow-root-expected.txt: Added. * LayoutTests/fast/shadow-dom/element-internals-exposes-declarative-shadow-root.html: Added. * LayoutTests/platform/win/TestExpectations: * Source/WebCore/dom/ElementInternals.cpp: (WebCore::ElementInternals::shadowRoot const): Canonical link: https://commits.webkit.org/258119@main
WebKit · Dec 20, 2022 · 198be33 · 198be33
1 parent 792bfbd
commit 198be33
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 1 deletion.
diff --git a/LayoutTests/fast/shadow-dom/element-internals-exposes-declarative-shadow-root-expected.txt b/LayoutTests/fast/shadow-dom/element-internals-exposes-declarative-shadow-root-expected.txt
@@ -0,0 +1,6 @@
+
+PASS Declarative Shadow DOM in "closed" mode is exposed via ElementInternals.prototype.shadowRoot
+PASS Declarative Shadow DOM in "open" mode is exposed via ElementInternals.prototype.shadowRoot
+PASS Declarative Shadow DOM in "closed" mode is not exposed via ElementInternals.prototype.shadowRoot after calling attachShadow
+PASS Declarative Shadow DOM in "open" mode is not exposed via ElementInternals.prototype.shadowRoot after calling attachShadow
+
diff --git a/LayoutTests/fast/shadow-dom/element-internals-exposes-declarative-shadow-root.html b/LayoutTests/fast/shadow-dom/element-internals-exposes-declarative-shadow-root.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script src="../../resources/gc.js"></script>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<component-1>
+    <template shadowrootmode="closed">
+        <slot>hello, world.</slot>
+    </template>
+</component-1>
+<component-2>
+    <template shadowrootmode="open">
+        <slot>hello, world.</slot>
+    </template>
+</component-2>
+<component-3>
+    <template shadowrootmode="closed">
+        <slot>hello, world.</slot>
+    </template>
+</component-3>
+<component-4>
+    <template shadowrootmode="closed">
+        <slot>hello, world.</slot>
+    </template>
+</component-4>
+<component-5>
+    <template shadowrootmode="closed">
+        <slot>hello, world.</slot>
+    </template>
+</component-5>
+<script>
+
+promise_test(async function () {
+    let internals = null;
+    customElements.define('component-1', class SomeElement extends HTMLElement {
+        constructor()
+        {
+            super();
+            internals = this.attachInternals();
+        }
+    });
+    assert_true(!!internals);
+    assert_true(!!internals.shadowRoot);
+    assert_equals(internals.shadowRoot.mode, 'closed');
+    assert_equals(internals.shadowRoot.innerHTML.trim(), '<slot>hello, world.</slot>');
+}, 'Declarative Shadow DOM in "closed" mode is exposed via ElementInternals.prototype.shadowRoot');
+
+promise_test(async function () {
+    let internals = null;
+    customElements.define('component-2', class SomeElement extends HTMLElement {
+        constructor()
+        {
+            super();
+            internals = this.attachInternals();
+        }
+    });
+    assert_true(!!internals);
+    assert_true(!!internals.shadowRoot);
+    assert_equals(internals.shadowRoot.mode, 'open');
+    assert_equals(internals.shadowRoot.innerHTML.trim(), '<slot>hello, world.</slot>');
+}, 'Declarative Shadow DOM in "open" mode is exposed via ElementInternals.prototype.shadowRoot');
+
+promise_test(async function () {
+    let internals = null;
+    const shadowRoot = document.querySelector('component-3').attachShadow({mode: 'closed'});
+    customElements.define('component-3', class SomeElement extends HTMLElement {
+        constructor()
+        {
+            super();
+            internals = this.attachInternals();
+        }
+    });
+    assert_true(!!internals);
+    assert_equals(internals.shadowRoot, null);
+    assert_equals(shadowRoot.mode, 'closed');
+    assert_equals(shadowRoot.innerHTML, '');
+}, 'Declarative Shadow DOM in "closed" mode is not exposed via ElementInternals.prototype.shadowRoot after calling attachShadow');
+
+promise_test(async function () {
+    let internals = null;
+    const shadowRoot = document.querySelector('component-4').attachShadow({mode: 'open'});
+    customElements.define('component-4', class SomeElement extends HTMLElement {
+        constructor()
+        {
+            super();
+            internals = this.attachInternals();
+        }
+    });
+    assert_true(!!internals);
+    assert_equals(internals.shadowRoot, null);
+    assert_equals(shadowRoot.mode, 'closed');
+    assert_equals(shadowRoot.innerHTML, '');
+}, 'Declarative Shadow DOM in "open" mode is not exposed via ElementInternals.prototype.shadowRoot after calling attachShadow');
+
+</script>
+</body>
+</html>
diff --git a/LayoutTests/platform/win/TestExpectations b/LayoutTests/platform/win/TestExpectations
@@ -3406,6 +3406,7 @@ fast/shadow-dom/imperative-named-slot-mixture.html [ Failure ]
 
 # Declarative shadow DOM isn't enabled on Windows yet.
 fast/shadow-dom/cloneable-shadow-root.html [ Failure ]
+fast/shadow-dom/element-internals-exposes-declarative-shadow-root.html [ Failure ]
 
 # The SVG -> OTF Font converter outputs 'kern' tables instead of 'GPOS' tables.
 webkit.org/b/137204 fast/text/svg-font-face-with-kerning.html [ Failure ]

diff --git a/Source/WebCore/dom/ElementInternals.cpp b/Source/WebCore/dom/ElementInternals.cpp
@@ -43,7 +43,9 @@ ShadowRoot* ElementInternals::shadowRoot() const
     if (!element)
         return nullptr;
     auto* shadowRoot = element->shadowRoot();
-    if (!shadowRoot || !shadowRoot->isAvailableToElementInternals())
+    if (!shadowRoot)
+        return nullptr;
+    if (!shadowRoot->isAvailableToElementInternals() && !shadowRoot->isDeclarativeShadowRoot())
         return nullptr;
     return shadowRoot;
 }