Use parts to allow customizing styles

[maloua]

I would like to be able to control the styling of web components better, so that they are more in line with the rest of the design when necessary. For example: I'm using the gmpx-place-picker in a bigger form, and there's currently no way to change the input border.

A solution would be to use the part selector to target inner element when necessary.

An alternative would be to use more variables and less hardcoded values in the css and overwrite them. But I'm afraid that will either not be sufficiently detailed enough or bloat the code too much.

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with :+1: so we can see what is popular when we triage.

@maloua Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[awmack]

Hey! Thanks for raising this. As you mention, we could make more aspects of the styling customizable with CSS variables, but this could end up reinventing the wheel. Exposing CSS ::part() could be a good approach for targeted elements like the input which are unlikely to change as part of the internal implementation.

[harisvsulaiman]

@awmack as @maloua Mentioned there is currently no way to style the border, the easiest solution would be to expose CSS variables until a more robust styling API is in place.

[dorsma]

Being able to style the input border, font style, and text color are necessary for a clean and consistent UI integration. For the input box, it's important also to be able to style the :focus pseudo elements as well.