Unable to style new address autocomplete widget after upgrading to 21.0.2

[shilpasebastian-2000]

Hi team
After updating shipperhq/module-address-autocomplete from 20.6.8 → 21.0.2, we noticed that a new address autocomplete widget has been introduced.

This widget uses Google’s gmp-place-autocomplete, which renders its input inside a closed shadow root. Because of this, any styling applied after the component is initialized cannot reach the internal input elements.

We were able to add a class on the element before the shadow root is created, but deeper styling (input height, padding, borders, focus/error states, etc.) isn’t possible. This results in visual inconsistency with our existing checkout fields, especially since this is a newly added widget.

Could you please advise if there is a supported way to control styling ?

We’d like to understand the recommended approach so the widget can visually align with the rest of the checkout fields.
Attaching the image of newly added widget:

Thanks,
Shilpa

[shqsupport]

Hi Shilpa, thanks for reaching out. At this stage, adding more styling control to the search functionality would be considered a feature enhancement request. We’ve raised this internally with our product team for review.

[shilpasebastian-2000]

Hi Shilpa, thanks for reaching out. At this stage, adding more styling control to the search functionality would be considered a feature enhancement request. We’ve raised this internally with our product team for review.

Hi Team,
Just wanted to follow up as this is blocking us from going live.

In addition to the styling concerns mentioned earlier, we're also facing these issues:

1. Dropdown appears black (see attached screenshot)— The autocomplete suggestions dropdown appears with a dark background, which stands out significantly. We've managed to style the field itself, but the dropdown is rendered inside a closed shadow root, so we have no way to override the background color, text color, or any other styling to match our design system. This creates a jarring user experience.

2. No placeholder text — The input field appears completely blank with just a search icon, so users don't immediately understand its purpose or that they should start typing. It would be good to add a placeholder to guide users, but there's currently no straightforward way to set this via HTML attributes or configuration options in the widget initialization.

Is there any update on when styling options might be available, or any workaround you'd recommend in the meantime?

Appreciate your help!
Thanks,
Shilpa

[wsajosh]

@shilpasebastian-2000 Thanks for raising the concerns. Unfortunately this is how the new Google Places API widget works by design - from Google rather than us. There's an open feature request with Google to improve it. You can see the discussion that others are having here, it's quite similar to what you have raised: https://stackoverflow.com/questions/79556333/how-to-style-google-maps-placeautocompleteelement-to-match-existing-form-inputs

We were forced to move to the new API with the new widget as Google stopped issuing API keys for the old one.

We'll keep monitoring the situation and will look into what we can do ourselves, but I don't expect there's much we can do in the immediate future.