refactor: do not use overlay content property (#4758)

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

@@ -77,7 +77,7 @@ class ContextMenuOverlay extends PositionMixin(Overlay) {
   }
 
   getFirstChild() {
-    return this.content.querySelector(':not(style):not(slot)');
+    return this.querySelector(':not(style):not(slot)');
   }
 
   _themeChanged() {

packages/context-menu/test/items.test.js

@@ -26,7 +26,7 @@ describe('items', () => {
   let rootMenu, subMenu, target;
 
   const menuComponents = (menu = rootMenu) => {
-    return Array.from(menu.$.overlay.content.firstElementChild.children);
+    return Array.from(menu.$.overlay.firstElementChild.children);
   };
 
   const open = (openTarget = target) => {
@@ -41,7 +41,7 @@ describe('items', () => {
   };
 
   const getSubMenu = (menu = rootMenu) => {
-    return menu.$.overlay.content.querySelector('vaadin-context-menu');
+    return menu.$.overlay.querySelector('vaadin-context-menu');
   };
 
   const updateItemsAndReopen = async () => {

packages/context-menu/test/renderer.test.js

@@ -34,19 +34,19 @@ describe('renderer', () => {
     fire(target, 'vaadin-contextmenu');
 
     expect(menu.renderer.callCount).to.equal(1);
-    expect(menu.$.overlay.content.textContent).to.contain('Renderer');
+    expect(menu.$.overlay.textContent).to.contain('Renderer');
   });
 
   it('should have target in context', () => {
     fire(target, 'vaadin-contextmenu');
 
-    expect(menu.$.overlay.content.textContent).to.contain('target');
+    expect(menu.$.overlay.textContent).to.contain('target');
   });
 
   it('should have detail in context', () => {
     fire(target, 'vaadin-contextmenu', { foo: 'bar' });
 
-    expect(menu.$.overlay.content.textContent).to.contain('bar');
+    expect(menu.$.overlay.textContent).to.contain('bar');
   });
 
   it('should have contextMenu owner argument', () => {
@@ -102,10 +102,10 @@ describe('renderer', () => {
     };
     fire(target, 'vaadin-contextmenu');
 
-    expect(menu.$.overlay.content.textContent.trim()).to.equal('foo');
+    expect(menu.$.overlay.textContent.trim()).to.equal('foo');
 
     menu.renderer = null;
 
-    expect(menu.$.overlay.content.textContent.trim()).to.equal('');
+    expect(menu.$.overlay.textContent.trim()).to.equal('');
   });
 });

packages/context-menu/test/template.test.js

@@ -20,18 +20,18 @@ describe('template', () => {
   it('should stamp template on open', () => {
     menu._setOpened(true);
 
-    expect(menu.$.overlay.content.textContent).to.contain('FOOBAR');
+    expect(menu.$.overlay.textContent).to.contain('FOOBAR');
   });
 
   it('should bind target property', () => {
     fire(target, 'vaadin-contextmenu');
 
-    expect(menu.$.overlay.content.textContent).to.contain('target');
+    expect(menu.$.overlay.textContent).to.contain('target');
   });
 
   it('should bind detail property', () => {
     fire(target, 'vaadin-contextmenu', { foo: 'bar' });
 
-    expect(menu.$.overlay.content.textContent).to.contain('bar');
+    expect(menu.$.overlay.textContent).to.contain('bar');
   });
 });

packages/dialog/test/dialog.test.js

@@ -198,11 +198,11 @@ describe('vaadin-dialog', () => {
 
     it('should bind parent property', () => {
       container.message = 'foo';
-      expect(overlay.content.querySelector('span').textContent.trim()).to.equal('foo');
+      expect(overlay.querySelector('span').textContent.trim()).to.equal('foo');
     });
 
     it('should support two-way data binding', () => {
-      const input = overlay.content.querySelector('input');
+      const input = overlay.querySelector('input');
       input.value = 'bar';
       input.dispatchEvent(new CustomEvent('input'));
       expect(container.text).to.equal('bar');

packages/dialog/test/draggable-resizable.test.js

@@ -762,7 +762,7 @@ describe('overflowing content', () => {
     div.style.maxWidth = '300px';
     div.style.overflow = 'auto';
     div.textContent = Array(100).join('Lorem ipsum dolor sit amet');
-    overlay.content.appendChild(div);
+    overlay.appendChild(div);
     // Emulate removing "pointer-events: none"
     overlayPart.setAttribute('style', '');
     expect(overlayPart.offsetHeight).to.equal(container.offsetHeight);
@@ -771,7 +771,7 @@ describe('overflowing content', () => {
   it('should not overflow when using vaadin-textarea in the content', async () => {
     const textarea = document.createElement('vaadin-text-area');
     textarea.value = Array(20).join('Lorem ipsum dolor sit amet');
-    overlay.content.appendChild(textarea);
+    overlay.appendChild(textarea);
     overlay.$.content.style.padding = '20px';
     resize(overlayPart.querySelector('.s'), 0, -50);
     await nextFrame();
@@ -781,7 +781,7 @@ describe('overflowing content', () => {
   it('should not reset scroll position on resize', async () => {
     const div = document.createElement('div');
     div.textContent = Array(100).join('Lorem ipsum dolor sit amet');
-    overlay.content.appendChild(div);
+    overlay.appendChild(div);
     dialog.$.overlay.setBounds({ height: 200 });
     await nextFrame();
     overlay.$.content.style.padding = '20px';

packages/field-highlighter/test/user-tags.test.js

@@ -20,7 +20,7 @@ describe('user-tags', () => {
 
   const getTags = () => {
     const { overlay } = wrapper.$;
-    return overlay.content.querySelectorAll('vaadin-user-tag');
+    return overlay.querySelectorAll('vaadin-user-tag');
   };
 
   const addUser = (user) => {

packages/select/test/items.test.js

@@ -10,7 +10,7 @@ describe('items', () => {
     select = fixtureSync(`<vaadin-select></vaadin-select>`);
     select.items = [{ label: 'Option 1', value: 'value-1' }];
     overlay = select.shadowRoot.querySelector('vaadin-select-overlay');
-    listBox = overlay.content.querySelector('vaadin-select-list-box');
+    listBox = overlay.querySelector('vaadin-select-list-box');
     select.opened = true;
   });
 
@@ -39,17 +39,17 @@ describe('items', () => {
 
   it('should clear the content when setting items property to an empty array', () => {
     select.items = [];
-    expect(overlay.content.childNodes).to.be.empty;
+    expect(overlay.childNodes).to.be.empty;
   });
 
   it('should clear the content when setting items property to null', () => {
     select.items = null;
-    expect(overlay.content.childNodes).to.be.empty;
+    expect(overlay.childNodes).to.be.empty;
   });
 
   it('should clear the content when setting items property to undefined', () => {
     select.items = undefined;
-    expect(overlay.content.childNodes).to.be.empty;
+    expect(overlay.childNodes).to.be.empty;
   });
 
   it('should render item with a custom component', () => {
@@ -72,12 +72,12 @@ describe('items', () => {
     });
 
     it('should override content with the renderer', () => {
-      expect(overlay.content.textContent).to.equal('Renderer');
+      expect(overlay.textContent).to.equal('Renderer');
     });
 
     it('should render items when removing the renderer', () => {
       select.renderer = null;
-      const newListBox = overlay.content.querySelector('vaadin-select-list-box');
+      const newListBox = overlay.querySelector('vaadin-select-list-box');
       expect(newListBox).to.be.ok;
       expect(newListBox.childNodes).to.have.lengthOf(1);
       expect(newListBox.childNodes[0].textContent).to.equal('Option 1');

packages/select/test/renderer.test.js

@@ -50,19 +50,19 @@ describe('renderer', () => {
     });
 
     it('should render content by the renderer', () => {
-      expect(overlay.content.childNodes).to.have.lengthOf(1);
-      expect(overlay.content.textContent).to.equal('Content');
+      expect(overlay.childNodes).to.have.lengthOf(1);
+      expect(overlay.textContent).to.equal('Content');
     });
 
     it('should clear the content when removing the renderer', () => {
       select.renderer = null;
-      expect(overlay.content.childNodes).to.be.empty;
+      expect(overlay.childNodes).to.be.empty;
     });
 
     it('should not override the content on items property change', () => {
       select.items = [{ label: 'Item 1', value: 'value-1' }];
-      expect(overlay.content.childNodes).to.have.lengthOf(1);
-      expect(overlay.content.textContent).to.equal('Content');
+      expect(overlay.childNodes).to.have.lengthOf(1);
+      expect(overlay.textContent).to.equal('Content');
     });
   });