bug: setting an ion-label's textContent early results in double labels

[ErikOnBike]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

When setting a new <ion-label> instance's textContent before it is attached to the document and then after attaching it re-assigning a new textContent value will leave both visible.

See: https://codepen.io/ErikOnBike/pen/XJXqZxR

Expected Behavior

The second assignment to the textContent property should remove the existing textContent value.

Steps to Reproduce

See: https://codepen.io/ErikOnBike/pen/XJXqZxR

Code Reproduction URL

https://codepen.io/ErikOnBike/pen/XJXqZxR

Ionic Info

n/a

Additional Information

This might be the effect of StencilJS' textContent patching. I'm not sure if I fully understand why StencilJS does all kinds of patching for WebComponents. It overrides things like children, childNodes and textContent which results in awkward behaviour if you're not following the standard Angular/Vite approach of dealing with DOM manipulation. I bumped into this a number of times now (I'm not using the mentioned frameworks).

[ErikOnBike]

(Similar example of what I think is the result of patching default WebComponent behaviour in StencilJS: stenciljs/core#6367)

[ErikOnBike]

For others, there is a workaround: instead of directly setting the textContent on the label, use a <span> (as a child) within the label. The <span> can be updated and does not need to be overwritten. Updating the <span>'s textContent works normally and therefore works around the issue in the <ion-label>.