refactor!: update menu-bar to render root submenu in light DOM (#9745)

Author: web-padawan

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

@@ -274,11 +274,6 @@ export const MenuBarMixin = (superClass) =>
       return Array.from(this.querySelectorAll('vaadin-menu-bar-button'));
     }
 
-    /** @private */
-    get _subMenu() {
-      return this.shadowRoot.querySelector('vaadin-menu-bar-submenu');
-    }
-
     /** @private */
     get _hasOverflow() {
       return this._overflow && !this._overflow.hasAttribute('hidden');
@@ -297,6 +292,20 @@ export const MenuBarMixin = (superClass) =>
 
       this.setAttribute('role', 'menubar');
 
+      this._subMenuController = new SlotController(this, 'submenu', 'vaadin-menu-bar-submenu', {
+        initializer: (menu) => {
+          menu.setAttribute('is-root', '');
+
+          menu.addEventListener('item-selected', this.__onItemSelected.bind(this));
+          menu.addEventListener('close-all-menus', this.__onEscapeClose.bind(this));
+
+          const overlay = menu._overlayElement;
+          overlay.addEventListener('keydown', this.__boundOnContextMenuKeydown);
+
+          this._subMenu = menu;
+        },
+      });
+
       this._overflowController = new SlotController(this, 'overflow', 'vaadin-menu-bar-button', {
         initializer: (btn) => {
           btn.setAttribute('hidden', '');
@@ -313,17 +322,13 @@ export const MenuBarMixin = (superClass) =>
           this._overflow = btn;
         },
       });
+
+      this.addController(this._subMenuController);
       this.addController(this._overflowController);
 
       this.addEventListener('mousedown', () => this._hideTooltip(true));
       this.addEventListener('mouseleave', () => this._hideTooltip());
 
-      this._subMenu.addEventListener('item-selected', this.__onItemSelected.bind(this));
-      this._subMenu.addEventListener('close-all-menus', this.__onEscapeClose.bind(this));
-
-      const overlay = this._subMenu._overlayElement;
-      overlay.addEventListener('keydown', this.__boundOnContextMenuKeydown);
-
       this._container = this.shadowRoot.querySelector('[part="container"]');
     }
 
@@ -343,6 +348,10 @@ export const MenuBarMixin = (superClass) =>
         this.__updateSubMenu();
       }
 
+      if (props.has('overlayClass')) {
+        this._subMenu.overlayClass = this.overlayClass;
+      }
+
       if (props.has('_theme')) {
         this._themeChanged(this._theme);
       }

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

@@ -43,7 +43,7 @@ export const SubMenuMixin = (superClass) =>
 
       // Only handle 1st level submenu
       if (this.hasAttribute('is-root')) {
-        this.getRootNode().host._close();
+        this.parentElement._close();
       }
     }
 

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

@@ -93,7 +93,8 @@ class MenuBar extends MenuBarMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoI
         <slot></slot>
         <slot name="overflow"></slot>
       </div>
-      <vaadin-menu-bar-submenu is-root .overlayClass="${this.overlayClass}"></vaadin-menu-bar-submenu>
+
+      <slot name="submenu"></slot>
 
       <slot name="tooltip"></slot>
     `;

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

@@ -3,6 +3,11 @@ export const snapshots = {};
 
 snapshots["menu-bar basic"] = 
 `<vaadin-menu-bar role="menubar">
+  <vaadin-menu-bar-submenu
+    is-root=""
+    slot="submenu"
+  >
+  </vaadin-menu-bar-submenu>
   <vaadin-menu-bar-button
     class="home"
     first-visible=""