bug: ion-label does not render when binding innerHTML directly #31433

Activity

1. ionitron-bot

   added

   triage

   on Sep 7, 2026
2. thetaPC commented on Oct 22, 2026

   

   thetaPC

   on Oct 22, 2026

   Contributor

   More actions

   Thanks for the report, and sorry for the delay.

   Verified on 9.0.9. ion-label is a scoped component, so Stencil, the library Ionic components are built with, keeps an internal marker inside the element to track where its content goes. Angular's [innerHTML] binding replaces every child of ion-label, including that marker, and on its next render Stencil hides any content it cannot place, which leaves the label empty. Setting the content later does not avoid it either: it disappears the next time the label re-renders, for example when its color changes. Bypassing Angular's sanitizer, suggested on earlier reports, does not help, since plain text disappears the same way.

   Workarounds, both verified on 9.0.9:

   • Bind innerHTML to an element inside the label instead of the label itself:

   <ion-item>
     <ion-label>
       <span [innerHTML]="labelText"></span>
     </ion-label>
   </ion-item>

   • For plain text with no markup, bind [textContent]="labelText" on the ion-label.

   The fix belongs in Stencil's runtime, so we have reported it upstream in stenciljs/core#6972. We are keeping this issue open to track the fix in Ionic.
3. thetaPC

   added

   package: core@ionic/core package@ionic/core package

   type: buga confirmed bug reporta confirmed bug report

   stencilIssues that require changes in StencilIssues that require changes in Stencil

   on Oct 22, 2026
4. ionitron-bot

   removed

   triage

   on Oct 22, 2026