bug: ion-textarea custom style not working for help or count

[StefaniToto]

Describe the Bug

Based on ionic documentation we can access and change the attributes of count and error .
https://ionicframework.com/docs/api/textarea

Below is a demo to change the size and color.

https://stackblitz.com/edit/angular-dhulrr-hexdmn?file=src%2Fapp%2Fexample.component.css,src%2Fapp%2Fexample.component.html

Expected Behavior

`ion-textarea.custom {
--background: #373737;
--color: #fff;
--padding-end: 10px;
--padding-start: 10px;
--placeholder-color: #ddd;
--placeholder-opacity: 0.8;
}

ion-textarea.custom .helper-text,
ion-textarea.custom .counter {
color: red !important;
font-size: 24px !important;
}`

Is expected to change the the style of helper and counter

Steps to Reproduce

Latest stackblitz from ionic documentation

Screenshots

Operating System

windows

Browser

firefox, chrome

Version

No response

Additional Information

No response

[mapsandapps]

Hi, thank you for the report! I can see that this example in the docs is not working in Angular. Angular encapsulation is preventing the helper-text class from getting the styles applied to it. You can fix this in the Stackblitz by moving

ion-textarea.custom .helper-text,
ion-textarea.custom .counter {
  color: red !important;
  font-size: 24px !important;
}

into the global.css file.

We need to update the docs to address this and also change the specificity to remove the requirement of !important.

[liamdebeasi]

Thanks for reporting this! This is fixed in #3199