refactor: make card size itself synchronously on first render (#10385) (#10388)

Author: tomivirkki

packages/card/src/vaadin-card.js

@@ -341,6 +341,12 @@ class Card extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
     `;
   }
 
+  /** @protected */
+  firstUpdated() {
+    super.firstUpdated();
+    this._onSlotChange();
+  }
+
   /** @private */
   _onSlotChange() {
     this.toggleAttribute('_m', this.querySelector(':scope > [slot="media"]'));

packages/card/test/card.test.ts

@@ -99,4 +99,20 @@ describe('vaadin-card', () => {
       expect(getCustomTitleElement()).to.exist;
     });
   });
+
+  describe('sizing', () => {
+    it('should size synchronously', async () => {
+      const template = `
+        <vaadin-card>
+          <div slot="title">New Message from Olivia</div>
+        </vaadin-card>`;
+
+      card = fixtureSync(template);
+      await nextRender();
+      const height = card.offsetHeight;
+
+      card = fixtureSync(template);
+      expect(card.offsetHeight).to.equal(height);
+    });
+  });
 });