LibWeb: Limit usage of getElementById() cache to connected roots

kalenikaliaksandr · kalenikaliaksandr · commit d5edd62e579a · 2025-04-06T04:14:29.000+02:00
Fixes bug when we always return null from getElementById() on
unconnected roots because id to element cache is only maintained for
connected roots.

Fixes broken Perf-Dashboard suite in Speedometer 3.
diff --git a/Libraries/LibWeb/DOM/ParentNode.cpp b/Libraries/LibWeb/DOM/ParentNode.cpp
@@ -262,14 +262,16 @@ GC::Ref<HTMLCollection> ParentNode::get_elements_by_class_name(StringView class_
 
 GC::Ptr<Element> ParentNode::get_element_by_id(FlyString const& id) const
 {
-    // For document and shadow root we have a cache that allows fast lookup.
-    if (is_document()) {
-        auto const& document = static_cast<Document const&>(*this);
-        return document.element_by_id().get(id);
-    }
-    if (is_shadow_root()) {
-        auto const& shadow_root = static_cast<ShadowRoot const&>(*this);
-        return shadow_root.element_by_id().get(id);
+    if (is_connected()) {
+        // For connected document and shadow root we have a cache that allows fast lookup.
+        if (is_document()) {
+            auto const& document = static_cast<Document const&>(*this);
+            return document.element_by_id().get(id);
+        }
+        if (is_shadow_root()) {
+            auto const& shadow_root = static_cast<ShadowRoot const&>(*this);
+            return shadow_root.element_by_id().get(id);
+        }
     }
 
     GC::Ptr<Element> found_element;
diff --git a/Tests/LibWeb/Text/expected/DOM/getElementById-on-unconnected-shadow-tree.txt b/Tests/LibWeb/Text/expected/DOM/getElementById-on-unconnected-shadow-tree.txt
@@ -0,0 +1 @@
+HelloWorld
diff --git a/Tests/LibWeb/Text/input/DOM/getElementById-on-unconnected-shadow-tree.html b/Tests/LibWeb/Text/input/DOM/getElementById-on-unconnected-shadow-tree.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<body></body>
+<script src="../include.js"></script>
+<script>
+test(() => {
+    let host = document.createElement("div");
+    let shadow = host.attachShadow({ mode: "open" });
+    shadow.innerHTML = `<p id="foo">Hello</p><span id="bar">World</span>`;
+    let foo = shadow.getElementById("foo");
+    let bar = shadow.getElementById("bar");
+    println(foo.textContent + bar.textContent);
+});
+</script>
