fix: set display to none on the popover host element (#7671)

Author: web-padawan

packages/popover/src/vaadin-popover.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-popover-overlay.js';
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import {
   getDeepActiveElement,
@@ -190,6 +190,14 @@ class Popover extends PopoverPositionMixin(
     return 'vaadin-popover';
   }
 
+  static get styles() {
+    return css`
+      :host {
+        display: none !important;
+      }
+    `;
+  }
+
   static get properties() {
     return {
       /**

packages/popover/test/basic.test.js

@@ -29,6 +29,17 @@ describe('popover', () => {
     });
   });
 
+  describe('host element', () => {
+    it('should set display: none on the host element by default', () => {
+      expect(getComputedStyle(popover).display).to.equal('none');
+    });
+
+    it('should enforce display: none to hide the host element', () => {
+      popover.style.display = 'block';
+      expect(getComputedStyle(popover).display).to.equal('none');
+    });
+  });
+
   describe('renderer', () => {
     let renderer;