fix(label): render content set with innerHTML

core/src/components/label/test/basic/label.e2e.ts

@@ -61,3 +61,81 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('label: inner content'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-label>Initial</ion-label>
+      `,
+        config
+      );
+    });
+
+    test('should render content set with innerHTML', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31433',
+      });
+
+      const label = page.locator('ion-label');
+
+      await label.evaluate((el: HTMLIonLabelElement) => {
+        el.innerHTML = '<strong>test</strong>';
+        // Changing a prop forces a re-render, which is when the content was hidden
+        el.color = 'primary';
+      });
+      await page.waitForChanges();
+
+      await expect(label).toBeVisible();
+      await expect(label).toHaveText('test');
+      await expect(label.locator('strong')).toBeVisible();
+    });
+
+    test('should render content set with innerText', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31433',
+      });
+
+      const label = page.locator('ion-label');
+
+      await label.evaluate((el: HTMLIonLabelElement) => {
+        el.innerText = 'test';
+        el.color = 'primary';
+      });
+      await page.waitForChanges();
+
+      await expect(label).toBeVisible();
+      await expect(label).toHaveText('test');
+    });
+
+    test('should keep content set with innerHTML across multiple re-renders', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31433',
+      });
+
+      const label = page.locator('ion-label');
+
+      await label.evaluate((el: HTMLIonLabelElement) => {
+        el.innerHTML = 'first';
+        el.color = 'primary';
+      });
+      await page.waitForChanges();
+
+      await label.evaluate((el: HTMLIonLabelElement) => {
+        el.innerHTML = 'second';
+        el.color = 'secondary';
+      });
+      await page.waitForChanges();
+
+      await expect(label).toBeVisible();
+      await expect(label).toHaveText('second');
+    });
+  });
+});