[FEATURE] Please add parts to the result ul and li elements

[taplar]

I'm submitting a

• [ ] Regression (a behavior that used to work and stopped working in a new release)
• [ ] Bug report
• [x] Enhancement
• [ ] Feature request
• [ ] Documentation issue or request

Description

• [ ] Bug: Description of the issue you encountered_
• [x] Feature: Description of the feature. Cause and its Motivation_

Our application allows for the client to choose between light/dark mode. In dark mode, the autosuggest results shows up in the default colors. Trying to style the results with the desired colors, I am able to use the [styles] to provide a list and listItem to be injected into the markup. However, the li elements dynamically get a .focus class which statically forces the background color to #f1f1f1, which clashes with the dark mode. I have not found a way yet to dynamically react to this and override that styling.

Most of the native ionic components that I have seen used a part="value" as part of their component composition which allows us to target them in the CSS with ::part(value). I would like to request that the ul and li elements of the results be given a part each that can be targeted like this.

This would allow us to create CSS rules targeting the parts, instead of injecting the inline styling, and would allow us to react to the dynamic things, such as (for example) with ::part(item).focus {}

Version Information

ionic4-auto-complete: ^2.9.2
@angular/cli: ~9.1.0

[jrquick17]

Hey @taplar, thanks for the request. I am not too familiar with the ::part so I am not sure what to do but am certainly willing to help. Can you point me to some resources and/or another project using the concept? Or feel free to submit a PR.