Style error in Angular reusable input text components

Describe the bug
When trying to make a reusable input component in Angular and wanting to pass a type property with @Input, the preset styles for the <input> tags are applied because of the CSS selectors

To Reproduce
Steps to reproduce the behavior:

1. Create an Angular component to make a reusable input text.
2. Add @Input() type: string = 'text'; inside the component.
3. Import and use the input component inside the page component.
4. Add the type attribute with a valid value like email, like this type="email".
5. Run the development server and view in the browser

Screenshots

Expected behavior
If CSS selectors were more specific, for example input[type=email] instead of [type=email], then the styles would only apply to tags and not to components with a custom attribute called type created by the developer.

This is how it should look without those unwanted styles:

Start with the Angular reusable input component described in the reproduction and locate the component styles using selectors such as [type=email]. Compare the rendered behavior for a native input and a custom component with a type input. Done means type-specific styles apply only to input elements, without affecting custom components.