feat: Make native input accessible via `part` for CSS

[fudom]

Prerequisites

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

Describe the Feature Request

Make native input accessible via part for CSS.

Describe the Use Case

For example, change the font of the input. Make 0 and O distinguishable.

Describe Preferred Solution

Just add part="native" to the input element.

I would do this for the native label too.

Describe Alternatives

Without part select, the font changes would also affect the label, which is undesirable. This is because Ionic changes their inputs with label inside.

Related Code

ion-input.id {
  &::part(native) {
    font-family: monospace;
    font-variant-numeric: slashed-zero; // optional for other fonts
  }
}

Additional Information

Ionic v8, Angular v19, Chrome v146

[brandyscarney]

Thanks for the issue! Input is a scoped component, meaning it doesn't use Shadow DOM. Since the ::part() API is only available for Shadow DOM components, it cannot be added here.

You can override the native input by targeting it like this:

ion-input.custom .native-input {
  font-family: monospace;
  font-variant-numeric: slashed-zero; 
  color: red;
}

However, because Angular scopes component styles by default, this selector will need to be placed in a global stylesheet or you can disable ViewEncapsulation: StackBlitz

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.