fix: preserve slot attribute for initially invisible elements (#24037) (CP: 25.0) (#24050)

This PR cherry-picks changes from the original PR #24037 to branch 25.0.
---
#### Original PR description
> When a component is set invisible before being attached, Flow's
client-side binding skips all attribute binding. This means structural
attributes like "slot" are never applied to the DOM, breaking CSS
selectors that depend on them (e.g. Aura theme's structural selectors
for AppLayout drawer).
> 
> On the server side, `StateNode.collectChanges()` now emits the slot
attribute even for invisible nodes, without consuming the feature's
change tracker so the full attribute set is still sent on visibility
change. On the client side,
> `SimpleElementBindingStrategy` applies the slot attribute to the DOM
during initial bind of invisible elements. The attribute name is defined
once in `NodeProperties.SLOT_ATTRIBUTE` and referenced by both server
and client.
> 
> Fixes vaadin/web-components#11212

---------

Co-authored-by: Marco Collovati <marco@vaadin.com>

Author: vaadin-bot

flow-client/src/main/java/com/vaadin/client/flow/binding/SimpleElementBindingStrategy.java

@@ -259,6 +259,8 @@ assert hasSameTag(stateNode, htmlNode) : "Element tag name is '"
             // Prepare teardown
             listeners.push(stateNode.addUnregisterListener(
                     e -> remove(listeners, context, computationsCollection)));
+        } else {
+            applyStructuralAttributes(stateNode, htmlNode);
         }
         listeners.push(bindVisibility(listeners, context,
                 computationsCollection, nodeFactory));
@@ -667,6 +669,24 @@ private void setElementInvisible(Element element, NodeMap visibilityData) {
         }
     }
 
+    /**
+     * Applies structural attributes (like "slot") to the element even when it
+     * is initially invisible. This preserves CSS selectors that depend on these
+     * attributes without exposing backend data.
+     */
+    private void applyStructuralAttributes(StateNode stateNode,
+            Element element) {
+        if (stateNode.hasFeature(NodeFeatures.ELEMENT_ATTRIBUTES)) {
+            NodeMap attributeMap = stateNode
+                    .getMap(NodeFeatures.ELEMENT_ATTRIBUTES);
+            String attr = NodeProperties.SLOT_ATTRIBUTE;
+            if (attributeMap.hasPropertyValue(attr)) {
+                MapProperty property = attributeMap.getProperty(attr);
+                updateAttribute(property, element);
+            }
+        }
+    }
+
     private void restoreInitialHiddenAttribute(Element element,
             NodeMap visibilityData) {
         storeInitialHiddenAttribute(element, visibilityData);

flow-client/src/test-gwt/java/com/vaadin/client/flow/GwtBasicElementBinderTest.java

@@ -1611,6 +1611,35 @@ public void testBindInvisibleElement_unbind() {
         assertNull(element.getAttribute("hidden"));
     }
 
+    public void testBindInvisibleNode_slotAttributeIsPreserved() {
+        node.getMap(NodeFeatures.ELEMENT_DATA)
+                .getProperty(NodeProperties.VISIBLE).setValue(false);
+
+        attributes.getProperty("slot").setValue("drawer");
+
+        Binder.bind(node, element);
+
+        Reactive.flush();
+
+        assertEquals(Boolean.TRUE.toString(), element.getAttribute("hidden"));
+        assertEquals("drawer", element.getAttribute("slot"));
+    }
+
+    public void testBindInvisibleNode_nonStructuralAttributesAreNotApplied() {
+        node.getMap(NodeFeatures.ELEMENT_DATA)
+                .getProperty(NodeProperties.VISIBLE).setValue(false);
+
+        attributes.getProperty("data-info").setValue("secret");
+        attributes.getProperty("slot").setValue("drawer");
+
+        Binder.bind(node, element);
+
+        Reactive.flush();
+
+        assertEquals("drawer", element.getAttribute("slot"));
+        assertNull(element.getAttribute("data-info"));
+    }
+
     /**
      * The StateNode is visible (the visibility is true).
      *

flow-server/src/main/java/com/vaadin/flow/internal/StateNode.java

@@ -44,13 +44,16 @@
 import com.vaadin.flow.function.SerializableConsumer;
 import com.vaadin.flow.internal.StateTree.BeforeClientResponseEntry;
 import com.vaadin.flow.internal.StateTree.ExecutionRegistration;
+import com.vaadin.flow.internal.change.MapPutChange;
 import com.vaadin.flow.internal.change.NodeAttachChange;
 import com.vaadin.flow.internal.change.NodeChange;
 import com.vaadin.flow.internal.change.NodeDetachChange;
+import com.vaadin.flow.internal.nodefeature.ElementAttributeMap;
 import com.vaadin.flow.internal.nodefeature.ElementData;
 import com.vaadin.flow.internal.nodefeature.InertData;
 import com.vaadin.flow.internal.nodefeature.NodeFeature;
 import com.vaadin.flow.internal.nodefeature.NodeFeatureRegistry;
+import com.vaadin.flow.internal.nodefeature.NodeProperties;
 import com.vaadin.flow.server.Command;
 import com.vaadin.flow.shared.Registration;
 
@@ -676,6 +679,7 @@ public void collectChanges(Consumer<NodeChange> collector) {
             if (hasFeature(ElementData.class)) {
                 doCollectChanges(collector,
                         Stream.of(getFeature(ElementData.class)));
+                collectStructuralAttributeChanges(collector);
             }
             return;
         }
@@ -708,6 +712,30 @@ private void doCollectChanges(Consumer<NodeChange> collector,
         }
     }
 
+    /**
+     * Emits only structural attribute changes for invisible elements. This
+     * sends a filtered subset of {@link ElementAttributeMap} values to avoid
+     * leaking data attributes to the client while preserving attributes needed
+     * for CSS selectors.
+     * <p>
+     * This does not consume the feature's change tracker, so the full attribute
+     * set is still available when the element becomes visible and gets fully
+     * bound.
+     */
+    private void collectStructuralAttributeChanges(
+            Consumer<NodeChange> collector) {
+        if (!hasFeature(ElementAttributeMap.class)) {
+            return;
+        }
+        ElementAttributeMap attributeMap = getFeature(
+                ElementAttributeMap.class);
+        String attr = NodeProperties.SLOT_ATTRIBUTE;
+        if (attributeMap.has(attr)) {
+            collector.accept(new MapPutChange(attributeMap, attr,
+                    attributeMap.get(attr)));
+        }
+    }
+
     private boolean hasChangeTracker(NodeFeature nodeFeature) {
         return changes != null && changes.containsKey(nodeFeature.getClass());
     }

flow-server/src/main/java/com/vaadin/flow/internal/nodefeature/NodeProperties.java

@@ -121,6 +121,13 @@ public final class NodeProperties {
      */
     public static final String URI_ATTRIBUTE = "uri";
 
+    /**
+     * The "slot" attribute, which should be sent to the client and applied to
+     * the DOM element even when the element is initially invisible. This is a
+     * structural attribute needed for CSS selectors and layout.
+     */
+    public static final String SLOT_ATTRIBUTE = "slot";
+
     private NodeProperties() {
     }
 }

flow-server/src/test/java/com/vaadin/flow/internal/StateNodeTest.java

@@ -1885,4 +1885,34 @@ private void assertCollectChanges_initiallyVisible(StateNode stateNode,
 
         Assert.assertEquals(0, changes.size());
     }
+
+    @Test
+    public void collectChanges_invisibleNode_slotAttributeCollected() {
+        UI ui = new UI();
+        Element element = ElementFactory.createDiv();
+        element.setAttribute("slot", "drawer");
+        element.setAttribute("data-secret", "sensitive");
+        element.setVisible(false);
+
+        ui.getElement().appendChild(element);
+
+        StateNode stateNode = element.getNode();
+
+        List<NodeChange> changes = new ArrayList<>();
+        stateNode.collectChanges(changes::add);
+
+        List<MapPutChange> attributeChanges = changes.stream()
+                .filter(MapPutChange.class::isInstance)
+                .map(MapPutChange.class::cast)
+                .filter(change -> change
+                        .getFeature() == ElementAttributeMap.class)
+                .collect(Collectors.toList());
+
+        // Only "slot" should be sent, not "data-secret"
+        Assert.assertEquals(
+                "Only structural attributes should be collected for invisible nodes",
+                1, attributeChanges.size());
+        Assert.assertEquals("slot", attributeChanges.get(0).getKey());
+        Assert.assertEquals("drawer", attributeChanges.get(0).getValue());
+    }
 }

flow-tests/test-root-context/src/main/java/com/vaadin/flow/uitest/ui/InvisibleSlotAttributeView.java

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2000-2026 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.uitest.ui;
+
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.NativeButton;
+import com.vaadin.flow.router.Route;
+import com.vaadin.flow.uitest.servlet.ViewTestLayout;
+
+@Route(value = "com.vaadin.flow.uitest.ui.InvisibleSlotAttributeView", layout = ViewTestLayout.class)
+public class InvisibleSlotAttributeView extends AbstractDivView {
+
+    public InvisibleSlotAttributeView() {
+        Div target = new Div("Initially invisible");
+        target.setId("target");
+        target.getElement().setAttribute("slot", "drawer");
+        target.getElement().setAttribute("data-info", "sensitive");
+        target.setVisible(false);
+
+        NativeButton showButton = new NativeButton("Make visible",
+                e -> target.setVisible(true));
+        showButton.setId("show-button");
+
+        add(showButton, target);
+    }
+}

flow-tests/test-root-context/src/test/java/com/vaadin/flow/uitest/ui/InvisibleSlotAttributeIT.java

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2000-2026 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.uitest.ui;
+
+import org.junit.Assert;
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.support.ui.ExpectedConditions;
+
+import com.vaadin.flow.component.html.testbench.NativeButtonElement;
+import com.vaadin.flow.testutil.ChromeBrowserTest;
+
+public class InvisibleSlotAttributeIT extends ChromeBrowserTest {
+
+    @Test
+    public void initiallyInvisibleElement_slotAttributeImmediatelyPropagated() {
+        open();
+
+        // Find the element by the "slot" attribute, since "id" property
+        // is not bound for invisible elements
+        WebElement target = findElement(By.cssSelector("[slot='drawer']"));
+
+        // Element is hidden but "slot" attribute should be present
+        Assert.assertEquals(Boolean.TRUE.toString(),
+                target.getAttribute("hidden"));
+        Assert.assertEquals("drawer", target.getAttribute("slot"));
+        // Non-structural attributes must NOT be sent for invisible elements
+        Assert.assertNull(target.getAttribute("data-info"));
+
+        $(NativeButtonElement.class).id("show-button").click();
+
+        // After becoming visible, the element is re-bound and gets its id
+        waitUntil(ExpectedConditions.presenceOfElementLocated(By.id("target")));
+        WebElement visibleTarget = findElement(By.id("target"));
+
+        // "hidden" should be gone and "slot" should still be present
+        Assert.assertNull(visibleTarget.getAttribute("hidden"));
+        Assert.assertEquals("drawer", visibleTarget.getAttribute("slot"));
+
+        // All attributes are sent after the element becomes visible
+        Assert.assertEquals("sensitive",
+                visibleTarget.getAttribute("data-info"));
+    }
+}