fix: style spreadsheet overlays when nested in a shadow root (#9713)

Since #9303, spreadsheet overlays (context menu, popup-button filters,
cell comments, tooltips) live in a `#spreadsheet-overlays` container in
the component's light DOM, styled by a global `<style>` in
`document.head`. When `<vaadin-spreadsheet>` is nested in another
element's shadow root — for example embedded as a web component, as in
the docs filtering example — the container ends up inside that shadow
tree, which the document-level stylesheet cannot cross, so the overlays
render unstyled.

To reproduce: open the [docs "spreadsheet filtering"
example](https://vaadin.com/docs/latest/example?embed=spreadsheet-filtering-wc.js&import=component/spreadsheet/spreadsheet-imports.ts)
(the spreadsheet is embedded as a web component) and open a column
filter — the popup shows with no rounded corners, background, or shadow.

On attach, also adopt the overlay stylesheet onto the container's own
root (`this._overlays.getRootNode()`) when that root is a `ShadowRoot`,
so the scoped `#spreadsheet-overlays …` rules apply inside the shadow
tree. Top-level usage is unchanged: the root is the document, already
covered by the existing `document.head` stylesheet.

Follow-up to #9303

---

🤖 Generated with [Claude Code](https://claude.com/claude-code)

https://claude.ai/code/session_01QjNdPXWEUciMEXQe9hMgMt

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: DiegoCardoso

vaadin-spreadsheet-flow-parent/vaadin-spreadsheet-flow-integration-tests/src/main/java/com/vaadin/flow/component/spreadsheet/tests/SpreadsheetInShadowRootPage.java

@@ -0,0 +1,59 @@
+/**
+ * Copyright 2000-2026 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ * See {@literal <https://vaadin.com/commercial-license-and-service-terms>} for the full
+ * license.
+ */
+package com.vaadin.flow.component.spreadsheet.tests;
+
+import org.apache.poi.ss.util.CellReference;
+
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.spreadsheet.PopupButton;
+import com.vaadin.flow.component.spreadsheet.Spreadsheet;
+import com.vaadin.flow.dom.ShadowRoot;
+import com.vaadin.flow.router.PageTitle;
+import com.vaadin.flow.router.Route;
+
+/**
+ * A {@code <vaadin-spreadsheet>} nested inside another element's shadow root.
+ * The overlay container ({@code #spreadsheet-overlays}) then lives inside that
+ * shadow tree, which a {@code document.head} stylesheet cannot reach. Selecting
+ * a cell opens a popup-button overlay, letting the IT verify the overlay styles
+ * still reach it. Reproduces the vaadin.com docs filtering example, which
+ * embeds the spreadsheet as a web component (shadow DOM).
+ */
+@Route("spreadsheet-in-shadow-root")
+@PageTitle("Spreadsheet in shadow root")
+public class SpreadsheetInShadowRootPage extends Div {
+
+    public SpreadsheetInShadowRootPage() {
+        Div host = new Div();
+        host.setId("shadow-host");
+        host.setWidth("400px");
+        host.setHeight("300px");
+        ShadowRoot shadow = host.getElement().attachShadow();
+
+        Spreadsheet spreadsheet = new Spreadsheet();
+        spreadsheet.setHeight("250px");
+        spreadsheet.addSelectionChangeListener(event -> {
+            if (event.getAllSelectedCells().size() != 1) {
+                return;
+            }
+            CellReference ref = event.getSelectedCellReference();
+            CellReference newRef = new CellReference(
+                    spreadsheet.getActiveSheet().getSheetName(), ref.getRow(),
+                    ref.getCol(), false, false);
+            PopupButton popupButton = new PopupButton();
+            popupButton.setContent(new Span("Popup content"));
+            spreadsheet.setPopup(newRef, popupButton);
+            popupButton.openPopup();
+        });
+
+        shadow.appendChild(spreadsheet.getElement());
+        add(host);
+    }
+}

vaadin-spreadsheet-flow-parent/vaadin-spreadsheet-flow-integration-tests/src/test/java/com/vaadin/flow/component/spreadsheet/test/SpreadsheetInShadowRootIT.java

@@ -0,0 +1,54 @@
+/**
+ * Copyright 2000-2026 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ * See {@literal <https://vaadin.com/commercial-license-and-service-terms>} for the full
+ * license.
+ */
+package com.vaadin.flow.component.spreadsheet.test;
+
+import org.junit.Assert;
+import org.junit.Before;
+import org.junit.Test;
+
+import com.vaadin.flow.component.html.testbench.DivElement;
+import com.vaadin.flow.component.spreadsheet.testbench.SpreadsheetElement;
+import com.vaadin.flow.testutil.TestPath;
+import com.vaadin.tests.AbstractComponentIT;
+
+@TestPath("spreadsheet-in-shadow-root")
+public class SpreadsheetInShadowRootIT extends AbstractComponentIT {
+
+    @Before
+    public void init() {
+        open();
+    }
+
+    @Test
+    public void spreadsheetNestedInShadowRoot_overlayIsStyled() {
+        SpreadsheetElement spreadsheet = $(DivElement.class).id("shadow-host")
+                .$(SpreadsheetElement.class).first();
+        // Selecting a cell opens a popup-button overlay (see the page).
+        spreadsheet.getCellAt(2, 2).click();
+
+        // The overlay lives inside the host's shadow root, so it can't be
+        // located at document level; drill through the shadow root instead.
+        waitUntil(driver -> (Boolean) executeScript(
+                "return !!document.getElementById('shadow-host').shadowRoot"
+                        + ".querySelector('.v-spreadsheet-popupbutton-overlay');"));
+
+        String borderRadius = (String) executeScript(
+                "return getComputedStyle(document.getElementById('shadow-host')"
+                        + ".shadowRoot.querySelector('.v-spreadsheet-popupbutton-overlay'))"
+                        + ".borderRadius;");
+
+        // Unstyled (bug): the UA popover default border-radius is 0px. Styled
+        // (fixed): the overlay stylesheet, adopted onto the shadow root, sets a
+        // non-zero border-radius.
+        Assert.assertNotEquals(
+                "Overlay styles should reach the overlay even when the "
+                        + "spreadsheet is nested in a shadow root",
+                "0px", borderRadius);
+    }
+}

vaadin-spreadsheet-flow-parent/vaadin-spreadsheet-flow/src/main/resources/META-INF/frontend/vaadin-spreadsheet/vaadin-spreadsheet.js

@@ -179,6 +179,16 @@ export class VaadinSpreadsheet extends LitElement {
 
       this._firstUpdate = true;
     }
+
+    // The overlay container lives in light DOM, so the overlay styles are
+    // injected into `document.head` (see constructor). That does not reach the
+    // container when `<vaadin-spreadsheet>` is nested inside another element's
+    // shadow root. In that case, also adopt the overlay styles onto the
+    // container's root so the scoped rules apply there too.
+    const root = this._overlays.getRootNode();
+    if (root instanceof ShadowRoot && !root.adoptedStyleSheets.includes(spreadsheetOverlayStyles.styleSheet)) {
+      root.adoptedStyleSheets.push(spreadsheetOverlayStyles.styleSheet);
+    }
   }
 
   disconnectedCallback() {