How to style Google Maps PlaceAutocompleteElement to match existing form inputs?

Question

I'm migrating from the legacy Google Places Autocomplete to the new PlaceAutocompleteElement in my Rails application. The new component is working functionally, but I can't get it to match the styling of my existing form inputs. Instead of enhancing my existing street address input field, the PlaceAutocompleteElement renders it as a completely separate input with Google's default styling, creating an inconsistent UI.

Do you know how to remove the black border and change styles overall in https://developers.google.com/maps/documentation/javascript/examples/place-autocomplete-element#maps_place_autocomplete_element-javascript ?

I can't find any example with styled widget. I found only for legacy places.

Answer 1

Currently the answer is your cant, well not easily. The Google PlaceAutocompleteElement element has a closed Shadow Root, so by design the component has been created with the intention of its internals and styles not being changeable. Its a fairly new component from Google so no doubt they will allow styles to be passed into PlaceAutocompleteElement or expose parts that can be styled in a conventional way.

But, if you want to style the element today you'll need to be creative (and a bit hacky). Until Google allow us to style the element, no other choice.

The below works well.

const attachShadow = Element.prototype.attachShadow;

Element.prototype.attachShadow = function (init: ShadowRootInit) {
  // Check if we are the new Google places autocomplete element...
  if (this.localName === "gmp-place-autocomplete") {
    // If we are, we need to override the default behaviour of attachShadow() to
    // set the mode to open to allow us to crowbar a style element into the shadow DOM.
    const shadow = attachShadow.call(this, {
      ...init,
      mode: "open"
    });

    const style = document.createElement("style");

    // Apply our own styles to the shadow DOM.
    style.textContent = `
      .widget-container {
        border: none !important;
      }
      .input-container {
        padding: 0px !important;
      }
      .focus-ring {
        display: none !important;
      }
      .dropdown {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(48 50 59 / var(--tw-bg-opacity)) !important;
        color: rgb(185 193 203 / var(--tw-text-opacity)) !important;
      }
      .place-autocomplete-element-place-icon {
        display: none !important;
      }
      .place-autocomplete-element-text-div {
        --tw-bg-opacity: 1 !important;
        color: rgb(185 193 203 / var(--tw-text-opacity)) !important;
      }
      .place-autocomplete-element-place-name {
        --tw-bg-opacity: 1 !important;
        color: rgb(185 193 203 / var(--tw-text-opacity)) !important;
      }
      .place-autocomplete-element-place-details {
        --tw-bg-opacity: 1 !important;
        color: rgb(185 193 203 / var(--tw-text-opacity)) !important;
      }
      .place-autocomplete-element-place-result--matched {
        --tw-bg-opacity: 1 !important;
        color: rgb(255 178 135 / var(--tw-text-opacity)) !important;
      }
      ul {
        border: none !important;
      }
      li {
        padding: 0px !important;
        margin: 5px !important;
        border: none !important;
        border-radius: 5px !important;
        min-height: 50px !important;
      }
      li:hover {
        --tw-bg-opacity: 1 !important;
        cursor: pointer !important;
        padding: 0px !important;
        margin: 5px !important;
        background-color: rgb(62 65 76 / var(--tw-bg-opacity)) !important;
      }
      input {
        --tw-text-opacity: 1;
        color: rgb(185 193 203 / var(--tw-text-opacity));
        background-color: transparent;
      }
    `;

    shadow.appendChild(style);

    // Set the shadowRoot property to the new shadow root that has our styles in it.
    return shadow;
  }
  // ...for other elements, proceed with the original behaviour of attachShadow().
  return attachShadow.call(this, init);
};