refactor: move context-menu and menu-bar overlay to the template (#9854)

Author: web-padawan

packages/context-menu/src/vaadin-context-menu-mixin.js

@@ -32,6 +32,7 @@ export const ContextMenuMixin = (superClass) =>
         opened: {
           type: Boolean,
           reflectToAttribute: true,
+          observer: '_openedChanged',
           value: false,
           notify: true,
           readOnly: true,
@@ -124,22 +125,15 @@ export const ContextMenuMixin = (superClass) =>
 
     static get observers() {
       return [
-        '_openedChanged(opened)',
         '_targetOrOpenOnChanged(listenOn, openOn)',
         '_rendererChanged(renderer, items)',
         '_fullscreenChanged(_fullscreen)',
-        '_overlayContextChanged(_overlayElement, _context)',
-        '_overlayModelessChanged(_overlayElement, _modeless)',
-        '_overlayPhoneChanged(_overlayElement, _phone)',
-        '_overlayThemeChanged(_overlayElement, _theme)',
       ];
     }
 
     constructor() {
       super();
 
-      this._createOverlay();
-
       this._boundOpen = this.open.bind(this);
       this._boundClose = this.close.bind(this);
       this._boundPreventDefault = this._preventDefault.bind(this);
@@ -171,8 +165,10 @@ export const ContextMenuMixin = (superClass) =>
     }
 
     /** @protected */
-    ready() {
-      super.ready();
+    firstUpdated() {
+      super.firstUpdated();
+
+      this._overlayElement = this.$.overlay;
 
       this.addController(
         new MediaQueryController(this._fullscreenMediaQuery, (matches) => {
@@ -181,33 +177,6 @@ export const ContextMenuMixin = (superClass) =>
       );
     }
 
-    /** @private */
-    _createOverlay() {
-      // Create an overlay in the constructor to use in observers before `ready()`
-      const overlay = document.createElement(`${this._tagNamePrefix}-overlay`);
-      overlay.owner = this;
-      overlay.setAttribute('exportparts', 'backdrop, overlay, content');
-
-      overlay.addEventListener('opened-changed', (e) => {
-        this._onOverlayOpened(e);
-      });
-
-      overlay.addEventListener('vaadin-overlay-open', (e) => {
-        this._onVaadinOverlayOpen(e);
-      });
-
-      const overlaySlot = document.createElement('slot');
-      overlaySlot.name = 'overlay';
-      overlay.append(overlaySlot);
-
-      const subMenuSlot = document.createElement('slot');
-      subMenuSlot.name = 'submenu';
-      subMenuSlot.slot = 'submenu';
-      overlay.append(subMenuSlot);
-
-      this._overlayElement = overlay;
-    }
-
     /**
      * Runs before overlay is fully rendered
      * @private
@@ -240,39 +209,6 @@ export const ContextMenuMixin = (superClass) =>
       this.__forwardFocus();
     }
 
-    /** @private */
-    _overlayContextChanged(overlay, context) {
-      if (overlay) {
-        overlay.model = context;
-      }
-    }
-
-    /** @private */
-    _overlayModelessChanged(overlay, modeless) {
-      if (overlay) {
-        overlay.modeless = modeless;
-      }
-    }
-
-    /** @private */
-    _overlayPhoneChanged(overlay, phone) {
-      if (overlay) {
-        overlay.toggleAttribute('phone', phone);
-        overlay.withBackdrop = phone;
-      }
-    }
-
-    /** @private */
-    _overlayThemeChanged(overlay, theme) {
-      if (overlay) {
-        if (theme) {
-          overlay.setAttribute('theme', theme);
-        } else {
-          overlay.removeAttribute('theme');
-        }
-      }
-    }
-
     /** @private */
     _targetOrOpenOnChanged(listenOn, openOn) {
       if (this._oldListenOn && this._oldOpenOn) {
@@ -339,17 +275,14 @@ export const ContextMenuMixin = (superClass) =>
     }
 
     /** @private */
-    _openedChanged(opened) {
+    _openedChanged(opened, oldOpened) {
       if (opened) {
         document.documentElement.addEventListener('contextmenu', this._boundOnGlobalContextMenu, true);
-      } else {
+      } else if (oldOpened) {
         document.documentElement.removeEventListener('contextmenu', this._boundOnGlobalContextMenu, true);
       }
 
       this.__setListenOnUserSelect(opened);
-
-      // Has to be set after instance has been created
-      this._overlayElement.opened = opened;
     }
 
     /**
@@ -383,11 +316,7 @@ export const ContextMenuMixin = (superClass) =>
         if (this.closeOn === 'click') {
           this.closeOn = '';
         }
-
-        renderer = this.__itemsRenderer;
       }
-
-      this._overlayElement.renderer = renderer;
     }
 
     /**

packages/context-menu/src/vaadin-context-menu.js

@@ -8,6 +8,7 @@ import './vaadin-context-menu-item.js';
 import './vaadin-context-menu-list-box.js';
 import './vaadin-context-menu-overlay.js';
 import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
@@ -233,17 +234,26 @@ class ContextMenu extends ContextMenuMixin(
 
   /** @protected */
   render() {
-    return html`<slot id="slot"></slot>`;
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.appendChild(this._overlayElement);
-    return root;
+    return html`
+      <slot id="slot"></slot>
+      <vaadin-context-menu-overlay
+        id="overlay"
+        .owner="${this}"
+        .opened="${this.opened}"
+        .model="${this._context}"
+        .modeless="${this._modeless}"
+        .renderer="${this.items ? this.__itemsRenderer : this.renderer}"
+        .withBackdrop="${this._phone}"
+        ?phone="${this._phone}"
+        theme="${ifDefined(this._theme)}"
+        exportparts="backdrop, overlay, content"
+        @opened-changed="${this._onOverlayOpened}"
+        @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
+      >
+        <slot name="overlay"></slot>
+        <slot name="submenu" slot="submenu"></slot>
+      </vaadin-context-menu-overlay>
+    `;
   }
 
   /**

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

@@ -1,6 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
-snapshots["context-menu items"] =
+
+snapshots["context-menu items"] = 
 `<vaadin-context-menu opened="">
   <div>
     Target
@@ -64,7 +65,7 @@ snapshots["context-menu items"] =
 `;
 /* end snapshot context-menu items */
 
-snapshots["context-menu items nested"] =
+snapshots["context-menu items nested"] = 
 `<vaadin-context-menu
   modeless=""
   opened=""
@@ -153,10 +154,11 @@ snapshots["context-menu items nested"] =
 `;
 /* end snapshot context-menu items nested */
 
-snapshots["context-menu overlay class"] =
+snapshots["context-menu overlay class"] = 
 `<vaadin-context-menu-overlay
   class="context-menu-overlay custom"
   exportparts="backdrop, overlay, content"
+  id="overlay"
   opened=""
   popover="manual"
 >
@@ -171,10 +173,11 @@ snapshots["context-menu overlay class"] =
 `;
 /* end snapshot context-menu overlay class */
 
-snapshots["context-menu overlay class nested"] =
+snapshots["context-menu overlay class nested"] = 
 `<vaadin-context-menu-overlay
   class="context-menu-overlay custom"
   exportparts="backdrop, overlay, content"
+  id="overlay"
   modeless=""
   opened=""
   popover="manual"
@@ -191,3 +194,4 @@ snapshots["context-menu overlay class nested"] =
 </vaadin-context-menu-overlay>
 `;
 /* end snapshot context-menu overlay class nested */
+

packages/menu-bar/src/vaadin-menu-bar-submenu-mixin.js

@@ -31,8 +31,8 @@ export const SubMenuMixin = (superClass) =>
     /**
      * Overriding the observer to not add global "contextmenu" listener.
      */
-    _openedChanged(opened) {
-      this._overlayElement.opened = opened;
+    _openedChanged() {
+      // Do nothing
     }
 
     /**

packages/menu-bar/src/vaadin-menu-bar-submenu.js

@@ -7,6 +7,7 @@ import './vaadin-menu-bar-item.js';
 import './vaadin-menu-bar-list-box.js';
 import './vaadin-menu-bar-overlay.js';
 import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
@@ -40,17 +41,25 @@ class MenuBarSubmenu extends SubMenuMixin(ThemePropertyMixin(PolylitMixin(LitEle
 
   /** @protected */
   render() {
-    return html`<slot id="slot"></slot>`;
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.appendChild(this._overlayElement);
-    return root;
+    return html`
+      <vaadin-menu-bar-overlay
+        id="overlay"
+        .owner="${this}"
+        .opened="${this.opened}"
+        .model="${this._context}"
+        .modeless="${this._modeless}"
+        .renderer="${this.__itemsRenderer}"
+        .withBackdrop="${this._phone}"
+        ?phone="${this._phone}"
+        theme="${ifDefined(this._theme)}"
+        exportparts="backdrop, overlay, content"
+        @opened-changed="${this._onOverlayOpened}"
+        @vaadin-overlay-open="${this._onVaadinOverlayOpen}"
+      >
+        <slot name="overlay"></slot>
+        <slot name="submenu" slot="submenu"></slot>
+      </vaadin-menu-bar-overlay>
+    `;
   }
 }
 

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

@@ -1,6 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
-snapshots["menu-bar basic"] =
+
+snapshots["menu-bar basic"] = 
 `<vaadin-menu-bar role="menubar">
   <vaadin-menu-bar-submenu
     is-root=""
@@ -65,7 +66,7 @@ snapshots["menu-bar basic"] =
 `;
 /* end snapshot menu-bar basic */
 
-snapshots["menu-bar opened"] =
+snapshots["menu-bar opened"] = 
 `<vaadin-menu-bar
   role="menubar"
   style="pointer-events: auto;"
@@ -165,9 +166,10 @@ snapshots["menu-bar opened"] =
 `;
 /* end snapshot menu-bar opened */
 
-snapshots["menu-bar overlay"] =
+snapshots["menu-bar overlay"] = 
 `<vaadin-menu-bar-overlay
   exportparts="backdrop, overlay, content"
+  id="overlay"
   opened=""
   popover="manual"
   start-aligned=""
@@ -184,10 +186,11 @@ snapshots["menu-bar overlay"] =
 `;
 /* end snapshot menu-bar overlay */
 
-snapshots["menu-bar overlay class"] =
+snapshots["menu-bar overlay class"] = 
 `<vaadin-menu-bar-overlay
   class="custom menu-bar-overlay"
   exportparts="backdrop, overlay, content"
+  id="overlay"
   opened=""
   popover="manual"
   start-aligned=""
@@ -203,3 +206,4 @@ snapshots["menu-bar overlay class"] =
 </vaadin-menu-bar-overlay>
 `;
 /* end snapshot menu-bar overlay class */
+