refactor: reflect overlay state attributes to owner (#9750)

* reflect position mixin state attributes

* reflect animation state attributes

* reflect modeless state attribute

* reflect with-backdrop state attribute

* update snapshot tests

* refactor to setOverlayStateAttribute

* update avatar group snapshots

* update TS declaration

Author: sissbruecker

packages/avatar-group/test/dom/__snapshots__/avatar-group.test.snap.js

@@ -11,7 +11,10 @@ snapshots["vaadin-avatar-group default"] =
     slot="overflow"
     tabindex="0"
   >
-    <vaadin-tooltip slot="tooltip">
+    <vaadin-tooltip
+      modeless=""
+      slot="tooltip"
+    >
       <div
         id="vaadin-tooltip-0"
         role="tooltip"
@@ -34,7 +37,10 @@ snapshots["vaadin-avatar-group items"] =
     tabindex="0"
     with-tooltip=""
   >
-    <vaadin-tooltip slot="tooltip">
+    <vaadin-tooltip
+      modeless=""
+      slot="tooltip"
+    >
       <div
         id="vaadin-tooltip-2"
         role="tooltip"
@@ -53,7 +59,10 @@ snapshots["vaadin-avatar-group items"] =
     tabindex="0"
     with-tooltip=""
   >
-    <vaadin-tooltip slot="tooltip">
+    <vaadin-tooltip
+      modeless=""
+      slot="tooltip"
+    >
       <div
         id="vaadin-tooltip-3"
         role="tooltip"
@@ -74,7 +83,10 @@ snapshots["vaadin-avatar-group items"] =
     slot="overflow"
     tabindex="0"
   >
-    <vaadin-tooltip slot="tooltip">
+    <vaadin-tooltip
+      modeless=""
+      slot="tooltip"
+    >
       <div
         id="vaadin-tooltip-1"
         role="tooltip"
@@ -103,7 +115,10 @@ snapshots["vaadin-avatar-group theme"] =
     theme="small"
     with-tooltip=""
   >
-    <vaadin-tooltip slot="tooltip">
+    <vaadin-tooltip
+      modeless=""
+      slot="tooltip"
+    >
       <div
         id="vaadin-tooltip-5"
         role="tooltip"
@@ -123,7 +138,10 @@ snapshots["vaadin-avatar-group theme"] =
     theme="small"
     with-tooltip=""
   >
-    <vaadin-tooltip slot="tooltip">
+    <vaadin-tooltip
+      modeless=""
+      slot="tooltip"
+    >
       <div
         id="vaadin-tooltip-6"
         role="tooltip"
@@ -145,7 +163,10 @@ snapshots["vaadin-avatar-group theme"] =
     tabindex="0"
     theme="small"
   >
-    <vaadin-tooltip slot="tooltip">
+    <vaadin-tooltip
+      modeless=""
+      slot="tooltip"
+    >
       <div
         id="vaadin-tooltip-4"
         role="tooltip"
@@ -164,6 +185,8 @@ snapshots["vaadin-avatar-group opened default"] =
 `<vaadin-avatar-group
   aria-label="Currently 4 active users"
   has-overflow=""
+  start-aligned=""
+  top-aligned=""
 >
   <vaadin-avatar
     abbr="AD"
@@ -174,7 +197,10 @@ snapshots["vaadin-avatar-group opened default"] =
     tabindex="0"
     with-tooltip=""
   >
-    <vaadin-tooltip slot="tooltip">
+    <vaadin-tooltip
+      modeless=""
+      slot="tooltip"
+    >
       <div
         id="vaadin-tooltip-8"
         role="tooltip"
@@ -193,7 +219,10 @@ snapshots["vaadin-avatar-group opened default"] =
     tabindex="0"
     with-tooltip=""
   >
-    <vaadin-tooltip slot="tooltip">
+    <vaadin-tooltip
+      modeless=""
+      slot="tooltip"
+    >
       <div
         id="vaadin-tooltip-9"
         role="tooltip"
@@ -214,7 +243,10 @@ snapshots["vaadin-avatar-group opened default"] =
     slot="overflow"
     tabindex="0"
   >
-    <vaadin-tooltip slot="tooltip">
+    <vaadin-tooltip
+      modeless=""
+      slot="tooltip"
+    >
       <div
         id="vaadin-tooltip-7"
         role="tooltip"

packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js

@@ -319,6 +319,8 @@ snapshots["vaadin-combo-box host opened default"] =
 `<vaadin-combo-box
   focused=""
   opened=""
+  start-aligned=""
+  top-aligned=""
 >
   <label
     for="input-vaadin-combo-box-4"

packages/context-menu/test/dom/__snapshots__/context-menu.test.snap.js

@@ -51,7 +51,10 @@ snapshots["context-menu items"] =
       Menu Item 5
     </div>
   </vaadin-context-menu-list-box>
-  <vaadin-context-menu hidden="">
+  <vaadin-context-menu
+    hidden=""
+    modeless=""
+  >
   </vaadin-context-menu>
 </vaadin-context-menu-overlay>
 `;
@@ -89,7 +92,12 @@ snapshots["context-menu items nested"] =
       Menu Item 2-2
     </vaadin-context-menu-item>
   </vaadin-context-menu-list-box>
-  <vaadin-context-menu hidden="">
+  <vaadin-context-menu
+    hidden=""
+    modeless=""
+    start-aligned=""
+    top-aligned=""
+  >
   </vaadin-context-menu>
 </vaadin-context-menu-overlay>
 `;
@@ -148,7 +156,10 @@ snapshots["context-menu items overlay class"] =
       Menu Item 5
     </div>
   </vaadin-context-menu-list-box>
-  <vaadin-context-menu hidden="">
+  <vaadin-context-menu
+    hidden=""
+    modeless=""
+  >
   </vaadin-context-menu>
 </vaadin-context-menu-overlay>
 `;
@@ -187,7 +198,12 @@ snapshots["context-menu items overlay class nested"] =
       Menu Item 2-2
     </vaadin-context-menu-item>
   </vaadin-context-menu-list-box>
-  <vaadin-context-menu hidden="">
+  <vaadin-context-menu
+    hidden=""
+    modeless=""
+    start-aligned=""
+    top-aligned=""
+  >
   </vaadin-context-menu>
 </vaadin-context-menu-overlay>
 `;

packages/crud/test/dom/__snapshots__/crud.test.snap.js

@@ -231,6 +231,7 @@ snapshots["vaadin-crud shadow default"] =
   cancel-button-visible=""
   confirm-theme="primary"
   id="confirmCancel"
+  with-backdrop=""
 >
   <h3 slot="header">
     Discard changes
@@ -273,6 +274,7 @@ snapshots["vaadin-crud shadow default"] =
   cancel-button-visible=""
   confirm-theme="primary error"
   id="confirmDelete"
+  with-backdrop=""
 >
   <h3 slot="header">
     Delete item

packages/menu-bar/test/dom/__snapshots__/menu-bar.test.snap.js

@@ -89,7 +89,10 @@ snapshots["menu-bar overlay"] =
       Generate Report
     </vaadin-menu-bar-item>
   </vaadin-menu-bar-list-box>
-  <vaadin-menu-bar-submenu hidden="">
+  <vaadin-menu-bar-submenu
+    hidden=""
+    modeless=""
+  >
   </vaadin-menu-bar-submenu>
 </vaadin-menu-bar-overlay>
 `;
@@ -124,7 +127,10 @@ snapshots["menu-bar overlay class"] =
       Generate Report
     </vaadin-menu-bar-item>
   </vaadin-menu-bar-list-box>
-  <vaadin-menu-bar-submenu hidden="">
+  <vaadin-menu-bar-submenu
+    hidden=""
+    modeless=""
+  >
   </vaadin-menu-bar-submenu>
 </vaadin-menu-bar-overlay>
 `;

packages/overlay/src/vaadin-overlay-mixin.js

@@ -6,6 +6,7 @@
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
 import { OverlayStackMixin } from './vaadin-overlay-stack-mixin.js';
+import { setOverlayStateAttribute } from './vaadin-overlay-utils.js';
 
 /**
  * @polymerMixin
@@ -91,6 +92,7 @@ export const OverlayMixin = (superClass) =>
           type: Boolean,
           value: false,
           reflectToAttribute: true,
+          observer: '_withBackdropChanged',
           sync: true,
         },
       };
@@ -279,6 +281,12 @@ export const OverlayMixin = (superClass) =>
         this._removeGlobalListeners();
         this._exitModalState();
       }
+      setOverlayStateAttribute(this, 'modeless', modeless);
+    }
+
+    /** @private */
+    _withBackdropChanged(withBackdrop) {
+      setOverlayStateAttribute(this, 'with-backdrop', withBackdrop);
     }
 
     /** @private */
@@ -378,7 +386,7 @@ export const OverlayMixin = (superClass) =>
       if (!this.modeless) {
         this._enterModalState();
       }
-      this.setAttribute('opening', '');
+      setOverlayStateAttribute(this, 'opening', true);
 
       if (this._shouldAnimate()) {
         this._enqueueAnimation('opening', () => {
@@ -398,15 +406,15 @@ export const OverlayMixin = (superClass) =>
 
     /** @private */
     _finishOpening() {
-      this.removeAttribute('opening');
+      setOverlayStateAttribute(this, 'opening', false);
     }
 
     /** @private */
     _finishClosing() {
       this._detachOverlay();
       this._removeAttachedInstance();
       this.$.overlay.style.removeProperty('pointer-events');
-      this.removeAttribute('closing');
+      setOverlayStateAttribute(this, 'closing', false);
       this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
     }
 
@@ -417,7 +425,7 @@ export const OverlayMixin = (superClass) =>
       }
       if (this._isAttached) {
         this._exitModalState();
-        this.setAttribute('closing', '');
+        setOverlayStateAttribute(this, 'closing', true);
         this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
 
         if (this._shouldAnimate()) {

packages/overlay/src/vaadin-overlay-position-mixin.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { getAncestorRootNodes } from '@vaadin/component-base/src/dom-utils.js';
-import { observeMove } from './vaadin-overlay-utils.js';
+import { observeMove, setOverlayStateAttribute } from './vaadin-overlay-utils.js';
 
 const PROP_NAMES_VERTICAL = {
   start: 'top',
@@ -271,11 +271,11 @@ export const PositionMixin = (superClass) =>
       // Apply the positioning properties to the overlay
       Object.assign(this.style, verticalProps, horizontalProps);
 
-      this.toggleAttribute('bottom-aligned', !shouldAlignStartVertically);
-      this.toggleAttribute('top-aligned', shouldAlignStartVertically);
+      setOverlayStateAttribute(this, 'bottom-aligned', !shouldAlignStartVertically);
+      setOverlayStateAttribute(this, 'top-aligned', shouldAlignStartVertically);
 
-      this.toggleAttribute('end-aligned', !flexStart);
-      this.toggleAttribute('start-aligned', flexStart);
+      setOverlayStateAttribute(this, 'end-aligned', !flexStart);
+      setOverlayStateAttribute(this, 'start-aligned', flexStart);
     }
 
     __shouldAlignStartHorizontally(targetRect, rtl) {

packages/overlay/src/vaadin-overlay-utils.d.ts

@@ -11,3 +11,9 @@
  * https://github.com/floating-ui/floating-ui/blob/58ed169/packages/dom/src/autoUpdate.ts#L45
  */
 export function observeMove(element: HTMLElement, callback: () => void): () => void;
+
+/**
+ * Toggle the state attribute on the overlay element and also its owner element. This allows targeting state attributes
+ * in the light DOM in case the overlay is in the shadow DOM of its owner.
+ */
+export function setOverlayStateAttribute(overlay: HTMLElement, name: string, value: string | boolean): void;

packages/overlay/src/vaadin-overlay-utils.js

@@ -87,3 +87,32 @@ export function observeMove(element, callback) {
 
   return cleanup;
 }
+
+/**
+ * Toggle the state attribute on the overlay element and also its owner element. This allows targeting state attributes
+ * in the light DOM in case the overlay is in the shadow DOM of its owner.
+ * @param {HTMLElement} overlay The overlay element on which to toggle the attribute.
+ * @param {string} name The name of the attribute to toggle.
+ * @param {string|boolean} value The value of the attribute. If a string is provided, it will be set as the attribute
+ * value. Otherwise, the attribute will be added or removed depending on whether `value` is truthy or falsy.
+ */
+export function setOverlayStateAttribute(overlay, name, value) {
+  const elements = [overlay];
+  if (overlay.owner) {
+    elements.push(overlay.owner);
+  }
+
+  if (typeof value === 'string') {
+    elements.forEach((element) => {
+      element.setAttribute(name, value);
+    });
+  } else if (value) {
+    elements.forEach((element) => {
+      element.setAttribute(name, '');
+    });
+  } else {
+    elements.forEach((element) => {
+      element.removeAttribute(name);
+    });
+  }
+}