fix: enforce tabsheet panels to be hidden (#10002) (#10005)

Author: sissbruecker

packages/tabsheet/src/vaadin-lit-tabsheet.js

@@ -49,6 +49,10 @@ class TabSheet extends TabSheetMixin(ThemableMixin(ElementMixin(PolylitMixin(Lit
         min-width: 8em;
       }
 
+      ::slotted([hidden]) {
+        display: none !important;
+      }
+
       [part='content'] {
         position: relative;
         flex: 1;

packages/tabsheet/src/vaadin-tabsheet.js

@@ -86,6 +86,10 @@ class TabSheet extends TabSheetMixin(ThemableMixin(ElementMixin(ControllerMixin(
           min-width: 8em;
         }
 
+        ::slotted([hidden]) {
+          display: none !important;
+        }
+
         [part='content'] {
           position: relative;
           flex: 1;

packages/tabsheet/test/tabsheet.test.js

@@ -162,6 +162,15 @@ describe('tabsheet', () => {
       expect(getPanels()[2].hidden).to.be.true;
     });
 
+    it('should override display style when panel is hidden', async () => {
+      tabsheet.selected = 1;
+      await nextFrame();
+      const panel2 = getPanels()[2];
+      panel2.style.display = 'contents';
+      const display = getComputedStyle(panel2).display;
+      expect(display).to.equal('none');
+    });
+
     it('should bind dynamically added tab and panel', async () => {
       // Create a new tab and panel
       const tab = document.createElement('vaadin-tab');