diff --git a/packages/context-menu/test/context.test.js b/packages/context-menu/test/context.test.js
index 712fdf2c65..bdfb72db8b 100644
--- a/packages/context-menu/test/context.test.js
+++ b/packages/context-menu/test/context.test.js
@@ -48,13 +48,13 @@ describe('context', () => {
     fire(target, 'vaadin-contextmenu');
 
     expect(menu._context.target).to.eql(target);
-    expect(menu.$.overlay.textContent).to.contain(target.textContent);
+    expect(menu._overlayElement.textContent).to.contain(target.textContent);
 
     menu.close();
     fire(another, 'vaadin-contextmenu');
 
     expect(menu._context.target).to.eql(another);
-    expect(menu.$.overlay.textContent).to.contain(another.textContent);
+    expect(menu._overlayElement.textContent).to.contain(another.textContent);
   });
 
   it('should use details as context details', () => {
diff --git a/packages/context-menu/test/dom/context-menu.test.js b/packages/context-menu/test/dom/context-menu.test.js
index c7bc7d4023..1c6d99ceb8 100644
--- a/packages/context-menu/test/dom/context-menu.test.js
+++ b/packages/context-menu/test/dom/context-menu.test.js
@@ -64,7 +64,7 @@ describe('context-menu', () => {
       </vaadin-context-menu>
     `);
     await nextRender();
-    overlay = menu.$.overlay;
+    overlay = menu._overlayElement;
   });
 
   it('items', async () => {
@@ -84,7 +84,7 @@ describe('context-menu', () => {
     await nextRender();
 
     const subMenu = overlay.querySelector('vaadin-context-menu');
-    await expect(subMenu.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    await expect(subMenu._overlayElement).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 
   it('items overlay class', async () => {
@@ -94,7 +94,7 @@ describe('context-menu', () => {
     contextmenu(menu);
     await nextRender();
 
-    await expect(menu.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    await expect(menu._overlayElement).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 
   it('items overlay class nested', async () => {
@@ -106,6 +106,6 @@ describe('context-menu', () => {
     await nextRender();
 
     const subMenu = overlay.querySelector('vaadin-context-menu');
-    await expect(subMenu.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    await expect(subMenu._overlayElement).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 });
diff --git a/packages/context-menu/test/helpers.js b/packages/context-menu/test/helpers.js
index f03465ac53..6caca698e6 100644
--- a/packages/context-menu/test/helpers.js
+++ b/packages/context-menu/test/helpers.js
@@ -12,16 +12,16 @@ export async function openMenu(target, event = isTouch ? 'click' : 'mouseover')
 }
 
 export function getMenuItems(menu) {
-  return [...menu.$.overlay.querySelectorAll('[role="menu"] > :not([role="separator]"')];
+  return [...menu._overlayElement.querySelectorAll('[role="menu"] > :not([role="separator]"')];
 }
 
 export function getSubMenu(menu) {
-  return menu.$.overlay.querySelector('vaadin-context-menu');
+  return menu._overlayElement.querySelector('vaadin-context-menu');
 }
 
 export async function openSubMenus(menu) {
-  await oneEvent(menu.$.overlay, 'vaadin-overlay-open');
-  const itemElement = menu.$.overlay.querySelector('[aria-haspopup="true"]');
+  await oneEvent(menu._overlayElement, 'vaadin-overlay-open');
+  const itemElement = menu._overlayElement.querySelector('[aria-haspopup="true"]');
   if (itemElement) {
     itemElement.dispatchEvent(new CustomEvent('mouseover', { bubbles: true, composed: true }));
     const subMenu = getSubMenu(menu);
diff --git a/packages/context-menu/test/integration.test.js b/packages/context-menu/test/integration.test.js
index 6db850f604..d913d0292e 100644
--- a/packages/context-menu/test/integration.test.js
+++ b/packages/context-menu/test/integration.test.js
@@ -34,7 +34,7 @@ describe('integration', () => {
     wrapper = fixtureSync('<menu-wrapper></menu-wrapper>');
     menu = wrapper.$.menu;
     button = wrapper.$.button;
-    overlay = menu.$.overlay;
+    overlay = menu._overlayElement;
   });
 
   it('should open context menu on .open(e)', () => {
diff --git a/packages/context-menu/test/items-theme.test.js b/packages/context-menu/test/items-theme.test.js
index 0b54b93a6e..edb210ffb5 100644
--- a/packages/context-menu/test/items-theme.test.js
+++ b/packages/context-menu/test/items-theme.test.js
@@ -56,7 +56,7 @@ describe('items theme', () => {
 
   it('should propagate host theme attribute to the nested elements', () => {
     [rootMenu, subMenu, subMenu2].forEach((subMenu) => {
-      const overlay = subMenu.$.overlay;
+      const overlay = subMenu._overlayElement;
       const listBox = overlay.querySelector('vaadin-context-menu-list-box');
       const items = Array.from(listBox.querySelectorAll('vaadin-context-menu-item'));
 
@@ -84,7 +84,7 @@ describe('items theme', () => {
     await openMenu(getMenuItems(subMenu)[1]);
 
     [rootMenu, subMenu, subMenu2].forEach((subMenu) => {
-      const overlay = subMenu.$.overlay;
+      const overlay = subMenu._overlayElement;
       const listBox = overlay.querySelector('vaadin-context-menu-list-box');
       const items = Array.from(listBox.querySelectorAll('vaadin-context-menu-item'));
 
diff --git a/packages/context-menu/test/items.test.js b/packages/context-menu/test/items.test.js
index 5c76fe8087..83fd63ee48 100644
--- a/packages/context-menu/test/items.test.js
+++ b/packages/context-menu/test/items.test.js
@@ -22,7 +22,7 @@ import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { getMenuItems, getSubMenu, openMenu } from './helpers.js';
 
 describe('items', () => {
-  let rootMenu, subMenu, target;
+  let rootMenu, subMenu, target, rootOverlay, subOverlay1;
 
   beforeEach(async () => {
     rootMenu = fixtureSync(`
@@ -47,8 +47,10 @@ describe('items', () => {
       { text: 'foo-2', keepOpen: true },
     ];
     await openMenu(target);
+    rootOverlay = rootMenu._overlayElement;
     await openMenu(getMenuItems(rootMenu)[0]);
     subMenu = getSubMenu(rootMenu);
+    subOverlay1 = subMenu._overlayElement;
   });
 
   afterEach(() => {
@@ -93,7 +95,7 @@ describe('items', () => {
   (isTouch ? it.skip : it)('should open the subMenu on the left side', async () => {
     subMenu.close();
     let rootItemRect = getMenuItems(rootMenu)[0].getBoundingClientRect();
-    rootMenu.$.overlay.style.left = `${window.innerWidth - rootItemRect.width * 1.5}px`;
+    rootOverlay.style.left = `${window.innerWidth - rootItemRect.width * 1.5}px`;
     await openMenu(getMenuItems(rootMenu)[0]);
     rootItemRect = getMenuItems(rootMenu)[0].getBoundingClientRect();
     const subItemRect = getMenuItems(subMenu)[0].getBoundingClientRect();
@@ -102,12 +104,12 @@ describe('items', () => {
 
   (isTouch ? it.skip : it)('should open the subMenu on the top if root menu is bottom-aligned', async () => {
     subMenu.close();
-    rootMenu.$.overlay.style.removeProperty('top');
-    rootMenu.$.overlay.style.bottom = '0px';
-    rootMenu.$.overlay.setAttribute('bottom-aligned', '');
+    rootOverlay.style.removeProperty('top');
+    rootOverlay.style.bottom = '0px';
+    rootOverlay.setAttribute('bottom-aligned', '');
     await openMenu(getMenuItems(rootMenu)[0]);
-    const rootMenuRect = rootMenu.$.overlay.getBoundingClientRect();
-    const subMenuRect = subMenu.$.overlay.getBoundingClientRect();
+    const rootMenuRect = rootOverlay.getBoundingClientRect();
+    const subMenuRect = subOverlay1.getBoundingClientRect();
     expect(subMenuRect.bottom).to.be.below(rootMenuRect.bottom);
   });
 
@@ -116,14 +118,13 @@ describe('items', () => {
     await nextRender(subMenu);
     const rootItem = getMenuItems(rootMenu)[0];
     const rootItemRect = rootItem.getBoundingClientRect();
-    const rootOverlay = rootMenu.$.overlay;
     rootOverlay.style.removeProperty('left');
     rootOverlay.style.right = `${rootItemRect.width}px`;
     rootOverlay.setAttribute('end-aligned', '');
     await openMenu(rootItem);
-    expect(subMenu.$.overlay.hasAttribute('end-aligned')).to.be.true;
+    expect(subOverlay1.hasAttribute('end-aligned')).to.be.true;
     const rootMenuRect = rootOverlay.$.content.getBoundingClientRect();
-    const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
+    const subMenuRect = subOverlay1.$.content.getBoundingClientRect();
     expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left, 2);
   });
 
@@ -137,7 +138,6 @@ describe('items', () => {
 
     const rootItem = getMenuItems(rootMenu)[0];
     const rootItemRect = rootItem.getBoundingClientRect();
-    const rootOverlay = rootMenu.$.overlay;
     rootOverlay.style.removeProperty('left');
     rootOverlay.style.right = `${rootItemRect.width}px`;
     rootOverlay.setAttribute('end-aligned', '');
@@ -145,19 +145,19 @@ describe('items', () => {
 
     /* First sub-menu end-aligned */
     await openMenu(rootItem);
-    expect(subMenu.$.overlay.hasAttribute('end-aligned')).to.be.true;
+    expect(subOverlay1.hasAttribute('end-aligned')).to.be.true;
     const rootMenuRect = rootOverlay.$.content.getBoundingClientRect();
-    const subMenuRect = subMenu.$.overlay.$.content.getBoundingClientRect();
+    const subMenuRect = subOverlay1.$.content.getBoundingClientRect();
     expect(subMenuRect.right).to.be.closeTo(rootMenuRect.left, 1);
 
     /* Second sub-menu left-aligned */
     const nestedItem = getMenuItems(subMenu)[2];
     const nestedItemRect = nestedItem.getBoundingClientRect();
-    padding = parseFloat(getComputedStyle(subMenu.$.overlay.$.content).paddingLeft) * 2;
+    padding = parseFloat(getComputedStyle(subOverlay1.$.content).paddingLeft) * 2;
     await openMenu(nestedItem);
     const subMenu2 = getSubMenu(subMenu);
-    expect(subMenu2.$.overlay.hasAttribute('end-aligned')).to.be.false;
-    const subMenu2Rect = subMenu2.$.overlay.$.content.getBoundingClientRect();
+    expect(subMenu2._overlayElement.hasAttribute('end-aligned')).to.be.false;
+    const subMenu2Rect = subMenu2._overlayElement.$.content.getBoundingClientRect();
     expect(subMenu2Rect.left).to.be.closeTo(nestedItemRect.right + padding / 2, 1);
   });
 
@@ -295,7 +295,7 @@ describe('items', () => {
   });
 
   it('should close on backdrop click', () => {
-    subMenu.$.overlay.$.backdrop.click();
+    subOverlay1.$.backdrop.click();
     expect(subMenu.opened).to.be.false;
   });
 
@@ -343,7 +343,7 @@ describe('items', () => {
 
   it('should not focus item if parent item is not focused', async () => {
     subMenu.close();
-    rootMenu.$.overlay.focus();
+    rootOverlay.focus();
     await openMenu(getMenuItems(rootMenu)[0]);
     expect(subMenu.opened).to.be.true;
     await nextRender(subMenu);
@@ -352,22 +352,22 @@ describe('items', () => {
 
   it('should focus first item in submenu on overlay element arrow down', async () => {
     subMenu.close();
-    rootMenu.$.overlay.focus();
+    rootOverlay.focus();
     await openMenu(getMenuItems(rootMenu)[0]);
     const item = getMenuItems(subMenu)[0];
     const spy = sinon.spy(item, 'focus');
-    arrowDownKeyDown(subMenu.$.overlay.$.overlay);
+    arrowDownKeyDown(subOverlay1.$.overlay);
     expect(spy.calledOnce).to.be.true;
   });
 
   it('should focus last item in submenu on overlay element arrow up', async () => {
     subMenu.close();
-    rootMenu.$.overlay.focus();
+    rootOverlay.focus();
     await openMenu(getMenuItems(rootMenu)[0]);
     const items = getMenuItems(subMenu);
     const item = items[items.length - 1];
     const spy = sinon.spy(item, 'focus');
-    arrowUpKeyDown(subMenu.$.overlay.$.overlay);
+    arrowUpKeyDown(subOverlay1.$.overlay);
     expect(spy.calledOnce).to.be.true;
   });
 
@@ -403,7 +403,7 @@ describe('items', () => {
   });
 
   it('should not call requestContentUpdate', () => {
-    const spy = sinon.spy(rootMenu.$.overlay, 'requestContentUpdate');
+    const spy = sinon.spy(rootOverlay, 'requestContentUpdate');
     rootMenu.requestContentUpdate();
     expect(spy.called).to.be.false;
   });
@@ -455,12 +455,12 @@ describe('items', () => {
 
       scrollElm = window.document.scrollingElement || window.document.querySelector('html');
 
-      rootOverlay = rootMenu.$.overlay;
-      subOverlay1 = subMenu.$.overlay;
+      rootOverlay = rootMenu._overlayElement;
+      subOverlay1 = subMenu._overlayElement;
 
       await openMenu(getMenuItems(subMenu)[2]);
       const subMenu2 = getSubMenu(subMenu);
-      subOverlay2 = subMenu2.$.overlay;
+      subOverlay2 = subMenu2._overlayElement;
       await nextFrame();
     });
 
diff --git a/packages/context-menu/test/lit-renderer-directives.test.js b/packages/context-menu/test/lit-renderer-directives.test.js
index 14fae9e113..dbef63379e 100644
--- a/packages/context-menu/test/lit-renderer-directives.test.js
+++ b/packages/context-menu/test/lit-renderer-directives.test.js
@@ -31,7 +31,7 @@ describe('lit renderer directives', () => {
       beforeEach(async () => {
         contextMenu = await renderContextMenu(container, { content: 'Content' });
         target = contextMenu.querySelector('button');
-        overlay = contextMenu.$.overlay;
+        overlay = contextMenu._overlayElement;
       });
 
       it('should set `renderer` property when the directive is attached', () => {
diff --git a/packages/context-menu/test/overlay.test.js b/packages/context-menu/test/overlay.test.js
index 1b9f6508f0..2fe7b5a26f 100644
--- a/packages/context-menu/test/overlay.test.js
+++ b/packages/context-menu/test/overlay.test.js
@@ -15,7 +15,7 @@ describe('overlay', () => {
     menu.renderer = (root) => {
       root.textContent = 'OVERLAY CONTENT';
     };
-    overlay = menu.$.overlay;
+    overlay = menu._overlayElement;
     content = overlay.$.overlay.children[0];
     // Make content have a fixed size
     content.style.height = content.style.width = '100px';
diff --git a/packages/context-menu/test/properties.test.js b/packages/context-menu/test/properties.test.js
index 68e8a71ee0..4284fc96dd 100644
--- a/packages/context-menu/test/properties.test.js
+++ b/packages/context-menu/test/properties.test.js
@@ -98,7 +98,7 @@ describe('properties', () => {
     it('should not close on `click`', () => {
       menu.closeOn = '';
 
-      menu.$.overlay.dispatchEvent(new CustomEvent('click'));
+      menu._overlayElement.dispatchEvent(new CustomEvent('click'));
 
       expect(menu.opened).to.eql(true);
     });
@@ -106,7 +106,7 @@ describe('properties', () => {
     it('should close on custom event', () => {
       menu.closeOn = 'foobar';
 
-      fire(menu.$.overlay, 'foobar');
+      fire(menu._overlayElement, 'foobar');
 
       expect(menu.opened).to.eql(false);
     });
@@ -165,7 +165,7 @@ describe('properties', () => {
     });
 
     it('should propagate theme attribute to overlay', () => {
-      expect(menu.$.overlay.getAttribute('theme')).to.equal('foo');
+      expect(menu._overlayElement.getAttribute('theme')).to.equal('foo');
     });
   });
 });
diff --git a/packages/context-menu/test/renderer.test.js b/packages/context-menu/test/renderer.test.js
index c754b07ca6..f985aabae2 100644
--- a/packages/context-menu/test/renderer.test.js
+++ b/packages/context-menu/test/renderer.test.js
@@ -5,7 +5,7 @@ import './not-animated-styles.js';
 import '../vaadin-context-menu.js';
 
 describe('renderer', () => {
-  let menu, target;
+  let menu, target, overlay;
 
   beforeEach(() => {
     menu = fixtureSync(`
@@ -22,6 +22,7 @@ describe('renderer', () => {
       );
     });
     target = menu.querySelector('#target');
+    overlay = menu._overlayElement;
   });
 
   afterEach(() => {
@@ -34,19 +35,19 @@ describe('renderer', () => {
     fire(target, 'vaadin-contextmenu');
 
     expect(menu.renderer.callCount).to.equal(1);
-    expect(menu.$.overlay.textContent).to.contain('Renderer');
+    expect(overlay.textContent).to.contain('Renderer');
   });
 
   it('should have target in context', () => {
     fire(target, 'vaadin-contextmenu');
 
-    expect(menu.$.overlay.textContent).to.contain('target');
+    expect(overlay.textContent).to.contain('target');
   });
 
   it('should have detail in context', () => {
     fire(target, 'vaadin-contextmenu', { foo: 'bar' });
 
-    expect(menu.$.overlay.textContent).to.contain('bar');
+    expect(overlay.textContent).to.contain('bar');
   });
 
   it('should have contextMenu owner argument', () => {
@@ -102,11 +103,11 @@ describe('renderer', () => {
     };
     fire(target, 'vaadin-contextmenu');
 
-    expect(menu.$.overlay.textContent.trim()).to.equal('foo');
+    expect(overlay.textContent.trim()).to.equal('foo');
 
     menu.renderer = null;
 
-    expect(menu.$.overlay.textContent.trim()).to.equal('');
+    expect(overlay.textContent.trim()).to.equal('');
   });
 
   it('should not throw if requestContentUpdate() called before adding to DOM', () => {
diff --git a/packages/context-menu/test/selection.test.js b/packages/context-menu/test/selection.test.js
index 0cb2bae3f6..5e7931cd64 100644
--- a/packages/context-menu/test/selection.test.js
+++ b/packages/context-menu/test/selection.test.js
@@ -11,7 +11,7 @@ describe('selection', () => {
 
   beforeEach(() => {
     menu = fixtureSync('<vaadin-context-menu></vaadin-context-menu>');
-    overlay = menu.$.overlay;
+    overlay = menu._overlayElement;
     menu.renderer = (root) => {
       root.innerHTML = `
         <vaadin-list-box id="menu">
diff --git a/packages/context-menu/test/touch.test.js b/packages/context-menu/test/touch.test.js
index f101a5c1b8..cba9df22a7 100644
--- a/packages/context-menu/test/touch.test.js
+++ b/packages/context-menu/test/touch.test.js
@@ -51,7 +51,7 @@ describe('mobile support', () => {
 
   it('should align to bottom of the viewport', (done) => {
     listenOnce(menu, 'opened-changed', () => {
-      const styles = window.getComputedStyle(menu.$.overlay);
+      const styles = window.getComputedStyle(menu._overlayElement);
       expect(styles.alignItems).to.eql('stretch');
       expect(styles.justifyContent).to.eql('flex-end');
       done();
diff --git a/packages/menu-bar/test/a11y.test.js b/packages/menu-bar/test/a11y.test.js
index 7aadc74fbf..a6f4577ced 100644
--- a/packages/menu-bar/test/a11y.test.js
+++ b/packages/menu-bar/test/a11y.test.js
@@ -21,7 +21,7 @@ describe('a11y', () => {
           ],
         },
       ];
-      overlay = menuBar._subMenu.$.overlay;
+      overlay = menuBar._subMenu._overlayElement;
       buttons = menuBar.querySelectorAll('vaadin-menu-bar-button');
       buttons[0].focus();
     });
diff --git a/packages/menu-bar/test/dom/menu-bar.test.js b/packages/menu-bar/test/dom/menu-bar.test.js
index e8cf3b5056..28e1911bb9 100644
--- a/packages/menu-bar/test/dom/menu-bar.test.js
+++ b/packages/menu-bar/test/dom/menu-bar.test.js
@@ -42,13 +42,13 @@ describe('menu-bar', () => {
   it('overlay', async () => {
     menu._buttons[1].click();
     await nextRender();
-    await expect(menu._subMenu.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    await expect(menu._subMenu._overlayElement).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 
   it('overlay class', async () => {
     menu.overlayClass = 'custom menu-bar-overlay';
     menu._buttons[1].click();
     await nextRender();
-    await expect(menu._subMenu.$.overlay).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    await expect(menu._subMenu._overlayElement).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
   });
 });
diff --git a/packages/menu-bar/test/menu-bar.test.js b/packages/menu-bar/test/menu-bar.test.js
index cd0901f714..6160e3d465 100644
--- a/packages/menu-bar/test/menu-bar.test.js
+++ b/packages/menu-bar/test/menu-bar.test.js
@@ -751,7 +751,7 @@ describe('item components', () => {
     it('should teleport the same component to overflow sub-menu and back', async () => {
       overflow.click();
       await nextRender(subMenu);
-      const listBox = subMenu.$.overlay.querySelector('vaadin-menu-bar-list-box');
+      const listBox = subMenu._overlayElement.querySelector('vaadin-menu-bar-list-box');
       expect(listBox.items[0]).to.equal(buttons[2].item.component);
       expect(listBox.items[0].firstChild).to.equal(menu.items[2].component);
       expect(listBox.items[0].firstChild.localName).to.equal('div');
diff --git a/packages/menu-bar/test/sub-menu.test.js b/packages/menu-bar/test/sub-menu.test.js
index 30b10fe11d..74d64a0f47 100644
--- a/packages/menu-bar/test/sub-menu.test.js
+++ b/packages/menu-bar/test/sub-menu.test.js
@@ -25,7 +25,7 @@ setCancelSyntheticClickEvents(false);
 const menuOpenEvent = isTouch ? 'click' : 'mouseover';
 
 describe('sub-menu', () => {
-  let menu, buttons, subMenu, item;
+  let menu, buttons, subMenu, subMenuOverlay, item;
 
   beforeEach(async () => {
     menu = fixtureSync('<vaadin-menu-bar></vaadin-menu-bar>');
@@ -48,6 +48,7 @@ describe('sub-menu', () => {
     ];
     await nextRender(menu);
     subMenu = menu._subMenu;
+    subMenuOverlay = subMenu._overlayElement;
     buttons = menu._buttons;
   });
 
@@ -76,19 +77,19 @@ describe('sub-menu', () => {
   });
 
   it('should focus the overlay when sub-menu opened on click', async () => {
-    const spy = sinon.spy(subMenu.$.overlay.$.overlay, 'focus');
+    const spy = sinon.spy(subMenuOverlay.$.overlay, 'focus');
     buttons[0].click();
     await nextRender(subMenu);
     expect(spy.calledOnce).to.be.true;
-    const item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     expect(item.hasAttribute('focused')).to.be.false;
   });
 
   it('should focus the first item on overlay arrow down after open on click', async () => {
     buttons[0].click();
     await nextRender(subMenu);
-    const overlay = subMenu.$.overlay.$.overlay;
-    const item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    const overlay = subMenuOverlay.$.overlay;
+    const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     const spy = sinon.spy(item, 'focus');
     arrowDown(overlay);
     expect(spy.calledOnce).to.be.true;
@@ -97,8 +98,8 @@ describe('sub-menu', () => {
   it('should focus the last item on overlay arrow up after open on click', async () => {
     buttons[0].click();
     await nextRender(subMenu);
-    const overlay = subMenu.$.overlay.$.overlay;
-    const items = subMenu.$.overlay.querySelectorAll('vaadin-menu-bar-item');
+    const overlay = subMenuOverlay.$.overlay;
+    const items = subMenuOverlay.querySelectorAll('vaadin-menu-bar-item');
     const last = items[items.length - 1];
     const spy = sinon.spy(last, 'focus');
     arrowUp(overlay);
@@ -118,7 +119,7 @@ describe('sub-menu', () => {
     arrowDown(buttons[0]);
     await oneEvent(subMenu, 'opened-changed');
     expect(subMenu.opened).to.be.true;
-    const item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     const spy = sinon.spy(item, 'focus');
     await nextRender(subMenu);
     expect(spy.calledOnce).to.be.true;
@@ -128,7 +129,7 @@ describe('sub-menu', () => {
     arrowUp(buttons[0]);
     await oneEvent(subMenu, 'opened-changed');
     expect(subMenu.opened).to.be.true;
-    const items = subMenu.$.overlay.querySelectorAll('vaadin-menu-bar-item');
+    const items = subMenuOverlay.querySelectorAll('vaadin-menu-bar-item');
     const last = items[items.length - 1];
     const spy = sinon.spy(last, 'focus');
     await nextRender(subMenu);
@@ -138,7 +139,7 @@ describe('sub-menu', () => {
   it('should close sub-menu on first item arrow up', async () => {
     arrowDown(buttons[0]);
     await oneEvent(subMenu, 'opened-changed');
-    item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     expect(item).to.be.ok;
     await nextRender(subMenu);
     arrowUp(item);
@@ -151,7 +152,7 @@ describe('sub-menu', () => {
     await oneEvent(subMenu, 'opened-changed');
     expect(subMenu.opened).to.be.true;
     await nextRender(subMenu);
-    const item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     arrowLeft(item);
     await nextRender(subMenu);
     expect(subMenu.opened).to.be.true;
@@ -163,7 +164,7 @@ describe('sub-menu', () => {
     await oneEvent(subMenu, 'opened-changed');
     expect(subMenu.opened).to.be.true;
     await nextRender(subMenu);
-    const item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     arrowLeft(item);
     await nextRender(subMenu);
     expect(subMenu.opened).to.be.false;
@@ -176,7 +177,7 @@ describe('sub-menu', () => {
     await oneEvent(subMenu, 'opened-changed');
     expect(subMenu.opened).to.be.true;
     await nextRender(subMenu);
-    const item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     arrowRight(item);
     await nextRender(subMenu);
     expect(subMenu.opened).to.be.true;
@@ -188,7 +189,7 @@ describe('sub-menu', () => {
     await oneEvent(subMenu, 'opened-changed');
     expect(subMenu.opened).to.be.true;
     await nextRender(subMenu);
-    const item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     arrowRight(item);
     await nextRender(subMenu);
     expect(subMenu.opened).to.be.false;
@@ -200,11 +201,11 @@ describe('sub-menu', () => {
     arrowDown(buttons[0]);
     await oneEvent(subMenu, 'opened-changed');
     expect(subMenu.opened).to.be.true;
-    let item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    let item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     await nextRender(subMenu);
     arrowLeft(item);
     await nextRender(subMenu);
-    item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     const spy = sinon.spy(item, 'focus');
     arrowDown(buttons[2]);
     expect(spy.calledOnce).to.be.true;
@@ -214,11 +215,11 @@ describe('sub-menu', () => {
     arrowDown(buttons[0]);
     await oneEvent(subMenu, 'opened-changed');
     expect(subMenu.opened).to.be.true;
-    const item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     await nextRender(subMenu);
     arrowLeft(item);
     await nextRender(subMenu);
-    const items = subMenu.$.overlay.querySelectorAll('vaadin-menu-bar-item');
+    const items = subMenuOverlay.querySelectorAll('vaadin-menu-bar-item');
     const last = items[items.length - 1];
     const spy = sinon.spy(last, 'focus');
     arrowUp(buttons[2]);
@@ -235,7 +236,7 @@ describe('sub-menu', () => {
     await nextRender(menu);
     arrowDown(buttons[0]);
     await nextRender(subMenu);
-    const item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     arrowLeft(item);
     await nextRender(subMenu);
     arrowLeft(buttons[2]);
@@ -250,7 +251,7 @@ describe('sub-menu', () => {
     await oneEvent(subMenu, 'opened-changed');
     expect(subMenu.opened).to.be.true;
     await nextRender(subMenu);
-    const item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    const item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     arrowLeft(item);
     await nextRender(subMenu);
     esc(buttons[2]);
@@ -274,7 +275,7 @@ describe('sub-menu', () => {
 
     const spy = sinon.spy();
     menu.addEventListener('item-selected', spy);
-    item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     item.click();
     await nextRender(subMenu);
     expect(subMenu.opened).to.be.false;
@@ -285,7 +286,7 @@ describe('sub-menu', () => {
   it('should not close submenu on item contextmenu event', async () => {
     buttons[0].click();
     await nextRender(subMenu);
-    item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+    item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
     item.dispatchEvent(new CustomEvent('contextmenu', { bubbles: true, composed: true }));
     await nextRender(subMenu);
     expect(subMenu.opened).to.be.true;
@@ -294,7 +295,7 @@ describe('sub-menu', () => {
   it('should not close on parent item click', async () => {
     arrowUp(buttons[0]);
     await oneEvent(subMenu, 'opened-changed');
-    const items = subMenu.$.overlay.querySelectorAll('vaadin-menu-bar-item');
+    const items = subMenuOverlay.querySelectorAll('vaadin-menu-bar-item');
     const last = items[items.length - 1];
     await nextRender(subMenu);
     last.click();
@@ -315,7 +316,7 @@ describe('sub-menu', () => {
     menu.style.bottom = '50px';
     buttons[0].click();
     await nextRender(subMenu);
-    const overlayRect = subMenu.$.overlay.getBoundingClientRect();
+    const overlayRect = subMenuOverlay.getBoundingClientRect();
     const buttonRect = buttons[0].getBoundingClientRect();
     expect(overlayRect.top + overlayRect.height).to.be.closeTo(buttonRect.top, 1);
   });
@@ -330,7 +331,7 @@ describe('sub-menu', () => {
       it('should position end-aligned sub-menu to button right in LTR', async () => {
         buttons[2].click();
         await nextRender(subMenu);
-        const overlayRect = subMenu.$.overlay.getBoundingClientRect();
+        const overlayRect = subMenuOverlay.getBoundingClientRect();
         const buttonRect = buttons[2].getBoundingClientRect();
         expect(overlayRect.right).to.be.closeTo(buttonRect.right, 1);
       });
@@ -350,7 +351,7 @@ describe('sub-menu', () => {
       it('should position sub-menu in RTL to button right', async () => {
         buttons[0].click();
         await nextRender(subMenu);
-        const overlayRect = subMenu.$.overlay.getBoundingClientRect();
+        const overlayRect = subMenuOverlay.getBoundingClientRect();
         const buttonRect = buttons[0].getBoundingClientRect();
         expect(overlayRect.right).to.be.closeTo(buttonRect.right, 1);
       });
@@ -358,7 +359,7 @@ describe('sub-menu', () => {
       it('should position end-aligned sub-menu in RTL to button left', async () => {
         buttons[2].click();
         await nextRender(subMenu);
-        const overlayRect = subMenu.$.overlay.getBoundingClientRect();
+        const overlayRect = subMenuOverlay.getBoundingClientRect();
         const buttonRect = buttons[2].getBoundingClientRect();
         expect(overlayRect.left).to.be.closeTo(buttonRect.left, 1);
       });
@@ -389,7 +390,7 @@ describe('sub-menu', () => {
       await nextRender(subMenu);
       expect(buttons[0].hasAttribute('expanded')).to.be.true;
 
-      item = subMenu.$.overlay.querySelector('vaadin-menu-bar-item');
+      item = subMenuOverlay.querySelector('vaadin-menu-bar-item');
       arrowUp(item);
       await nextRender(subMenu);
       expect(buttons[0].hasAttribute('expanded')).to.be.false;
@@ -400,7 +401,7 @@ describe('sub-menu', () => {
       await nextRender(subMenu);
       expect(buttons[0].hasAttribute('expanded')).to.be.true;
 
-      esc(subMenu.$.overlay);
+      esc(subMenuOverlay);
       await nextRender(subMenu);
       expect(buttons[0].hasAttribute('expanded')).to.be.false;
       expect(buttons[0].hasAttribute('focus-ring')).to.be.true;
@@ -410,7 +411,7 @@ describe('sub-menu', () => {
       buttons[0].click();
       await nextRender(subMenu);
 
-      subMenu.$.overlay.$.backdrop.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }));
+      subMenuOverlay.$.backdrop.dispatchEvent(new CustomEvent('click', { bubbles: true, composed: true }));
       await nextRender(subMenu);
       expect(subMenu.opened).to.be.false;
       expect(buttons[0].hasAttribute('expanded')).to.be.false;
@@ -556,7 +557,7 @@ describe('accessibility', () => {
 });
 
 describe('theme attribute', () => {
-  let menu, subMenu, buttons;
+  let menu, subMenu, subMenuOverlay, buttons;
 
   beforeEach(async () => {
     menu = fixtureSync('<vaadin-menu-bar theme="foo"></vaadin-menu-bar>');
@@ -575,6 +576,7 @@ describe('theme attribute', () => {
     ];
     await nextRender(menu);
     subMenu = menu._subMenu;
+    subMenuOverlay = subMenu._overlayElement;
     buttons = menu._buttons;
 
     // Open submenu
@@ -593,7 +595,7 @@ describe('theme attribute', () => {
   });
 
   it('should override the component theme attribute with the item.theme property', async () => {
-    let items = subMenu.$.overlay.querySelectorAll('vaadin-menu-bar-item');
+    let items = subMenuOverlay.querySelectorAll('vaadin-menu-bar-item');
 
     expect(items[0].getAttribute('theme')).to.equal('sub-item-theme');
     expect(items[1].getAttribute('theme')).to.equal('foo');
@@ -603,7 +605,7 @@ describe('theme attribute', () => {
     buttons[0].dispatchEvent(new CustomEvent(menuOpenEvent, { bubbles: true, composed: true }));
     await nextRender(subMenu);
 
-    items = subMenu.$.overlay.querySelectorAll('vaadin-menu-bar-item');
+    items = subMenuOverlay.querySelectorAll('vaadin-menu-bar-item');
 
     expect(items[0].getAttribute('theme')).to.equal('sub-item-theme');
     expect(items[1].hasAttribute('theme')).to.be.false;
@@ -611,13 +613,13 @@ describe('theme attribute', () => {
 });
 
 describe('touch', () => {
-  let menu, buttons, subMenu, items, item;
+  let menu, buttons, subMenu, subMenuOverlay, items, item;
 
   const open = (openTarget) => {
-    const menu = openTarget.parentElement.parentElement.__dataHost;
+    const menu = openTarget.parentElement.parentElement.owner;
     if (menu) {
       menu.__openListenerActive = true;
-      const overlay = menu.$.overlay;
+      const overlay = menu._overlayElement;
       overlay.__openingHandler?.();
     }
     fire(openTarget, menuOpenEvent);
@@ -647,6 +649,7 @@ describe('touch', () => {
     ];
     await nextRender(menu);
     subMenu = menu._subMenu;
+    subMenuOverlay = subMenu._overlayElement;
     buttons = menu._buttons;
   });
 
@@ -654,12 +657,12 @@ describe('touch', () => {
     arrowDown(buttons[0]);
     await oneEvent(subMenu, 'opened-changed');
     await nextRender(subMenu);
-    const subMenu2 = subMenu.$.overlay.querySelector('vaadin-menu-bar-submenu');
-    items = subMenu.$.overlay.querySelectorAll('vaadin-menu-bar-item');
+    const subMenu2 = subMenuOverlay.querySelector('vaadin-menu-bar-submenu');
+    items = subMenuOverlay.querySelectorAll('vaadin-menu-bar-item');
     item = items[items.length - 1];
     open(item);
     await nextRender(subMenu2);
-    items = subMenu2.$.overlay.querySelectorAll('vaadin-menu-bar-item');
+    items = subMenu2._overlayElement.querySelectorAll('vaadin-menu-bar-item');
     item = items[items.length - 1];
     touchstart(item);
     touchend(item);
@@ -672,13 +675,13 @@ describe('touch', () => {
     arrowDown(buttons[0]);
     await oneEvent(subMenu, 'opened-changed');
     await nextRender(subMenu);
-    const subMenu2 = subMenu.$.overlay.querySelector('vaadin-menu-bar-submenu');
-    items = subMenu.$.overlay.querySelectorAll('vaadin-menu-bar-item');
+    const subMenu2 = subMenuOverlay.querySelector('vaadin-menu-bar-submenu');
+    items = subMenuOverlay.querySelectorAll('vaadin-menu-bar-item');
     item = items[items.length - 1];
     open(item);
     await nextRender(subMenu2);
-    const subMenu3 = subMenu2.$.overlay.querySelector('vaadin-menu-bar-submenu');
-    item = subMenu2.$.overlay.querySelector('vaadin-menu-bar-item');
+    const subMenu3 = subMenu2._overlayElement.querySelector('vaadin-menu-bar-submenu');
+    item = subMenu2._overlayElement.querySelector('vaadin-menu-bar-item');
     expect(item).to.be.ok;
     open(item);
     await nextRender(subMenu3);
diff --git a/packages/menu-bar/test/visual/lumo/menu-bar.test.js b/packages/menu-bar/test/visual/lumo/menu-bar.test.js
index dab6a8712d..384115fc40 100644
--- a/packages/menu-bar/test/visual/lumo/menu-bar.test.js
+++ b/packages/menu-bar/test/visual/lumo/menu-bar.test.js
@@ -67,6 +67,8 @@ describe('menu-bar', () => {
       });
 
       describe('theme', () => {
+        let overlay;
+
         function makeIcon(img) {
           const item = document.createElement('vaadin-menu-bar-item');
           const icon = document.createElement('vaadin-icon');
@@ -93,13 +95,14 @@ describe('menu-bar', () => {
             },
             { text: 'Help' },
           ];
+          overlay = element._subMenu._overlayElement;
         });
 
         it('primary', async () => {
           div.style.width = '320px';
           element.setAttribute('theme', 'primary');
           arrowDown(element._buttons[1]);
-          await oneEvent(element._subMenu.$.overlay, 'vaadin-overlay-open');
+          await oneEvent(overlay, 'vaadin-overlay-open');
           await visualDiff(document.body, `${dir}-primary`);
         });
 
@@ -107,7 +110,7 @@ describe('menu-bar', () => {
           div.style.width = '320px';
           element.setAttribute('theme', 'secondary');
           arrowDown(element._buttons[1]);
-          await oneEvent(element._subMenu.$.overlay, 'vaadin-overlay-open');
+          await oneEvent(overlay, 'vaadin-overlay-open');
           await visualDiff(document.body, `${dir}-secondary`);
         });
 
@@ -115,7 +118,7 @@ describe('menu-bar', () => {
           div.style.width = '265px';
           element.setAttribute('theme', 'tertiary');
           arrowDown(element._buttons[1]);
-          await oneEvent(element._subMenu.$.overlay, 'vaadin-overlay-open');
+          await oneEvent(overlay, 'vaadin-overlay-open');
           await visualDiff(document.body, `${dir}-tertiary`);
         });
 
@@ -123,7 +126,7 @@ describe('menu-bar', () => {
           div.style.width = '200px';
           element.setAttribute('theme', 'tertiary-inline');
           arrowDown(element._buttons[1]);
-          await oneEvent(element._subMenu.$.overlay, 'vaadin-overlay-open');
+          await oneEvent(overlay, 'vaadin-overlay-open');
           await visualDiff(document.body, `${dir}-tertiary-inline`);
         });
 
@@ -131,7 +134,7 @@ describe('menu-bar', () => {
           div.style.width = '265px';
           element.setAttribute('theme', 'small');
           arrowDown(element._buttons[1]);
-          await oneEvent(element._subMenu.$.overlay, 'vaadin-overlay-open');
+          await oneEvent(overlay, 'vaadin-overlay-open');
           await visualDiff(document.body, `${dir}-small`);
         });
 
diff --git a/packages/menu-bar/test/visual/material/menu-bar.test.js b/packages/menu-bar/test/visual/material/menu-bar.test.js
index 4f6831e2ed..7a29282709 100644
--- a/packages/menu-bar/test/visual/material/menu-bar.test.js
+++ b/packages/menu-bar/test/visual/material/menu-bar.test.js
@@ -68,6 +68,8 @@ describe('menu-bar', () => {
       });
 
       describe('theme', () => {
+        let overlay;
+
         function makeIcon(img) {
           const item = document.createElement('vaadin-menu-bar-item');
           const icon = document.createElement('vaadin-icon');
@@ -94,13 +96,14 @@ describe('menu-bar', () => {
             },
             { text: 'Help' },
           ];
+          overlay = element._subMenu.$.overlay;
         });
 
         it('outlined', async () => {
           div.style.width = '320px';
           element.setAttribute('theme', 'outlined');
           arrowDown(element._buttons[1]);
-          await oneEvent(element._subMenu.$.overlay, 'vaadin-overlay-open');
+          await oneEvent(overlay, 'vaadin-overlay-open');
           await visualDiff(document.body, `${dir}-outlined`);
         });
 
@@ -108,7 +111,7 @@ describe('menu-bar', () => {
           div.style.width = '320px';
           element.setAttribute('theme', 'contained');
           arrowDown(element._buttons[1]);
-          await oneEvent(element._subMenu.$.overlay, 'vaadin-overlay-open');
+          await oneEvent(overlay, 'vaadin-overlay-open');
           await visualDiff(document.body, `${dir}-contained`);
         });
 
@@ -116,7 +119,7 @@ describe('menu-bar', () => {
           div.style.width = '320px';
           element.setAttribute('theme', 'text');
           arrowDown(element._buttons[1]);
-          await oneEvent(element._subMenu.$.overlay, 'vaadin-overlay-open');
+          await oneEvent(overlay, 'vaadin-overlay-open');
           await visualDiff(document.body, `${dir}-text`);
         });