Google Places API Update: Official CSS Support Eliminates Shadow DOM Hacks

Some weeks Ago, I wrote about Mastering Google's New Places API, where I documented the challenging journey of styling Google's <gmp-place-autocomplete> web component. The main challenge was that Google's component used a closed Shadow DOM, requiring creative solutions like monkey-patching the attachShadow method to inject custom styles.

Great news: Google has now officially added CSS support to the Place Autocomplete widget, making our complex Shadow DOM workarounds obsolete!

What Changed?

Google's official documentation now includes CSS properties that can be applied directly to the <gmp-place-autocomplete> element:

The New, Simple Approach

Instead of the complex Shadow DOM monkey patch from our previous implementation, we can now use a much cleaner approach:

// OLD WAY: Complex Shadow DOM manipulation (no longer needed!)
setupShadowDOMStyling() {
  const originalAttachShadow = Element.prototype.attachShadow
  // ... 150+ lines of complex CSS injection
}

// NEW WAY: Simple CSS property setting
setupAutocompleteStyles() {
  const autocompleteElement = this.autocompleteTarget

  // Force light theme to prevent system dark mode adaptation
  autocompleteElement.style.setProperty('color-scheme', 'light')

  // Set background color to white
  autocompleteElement.style.setProperty('background-color', 'white')

  // Match Tailwind's border styling
  autocompleteElement.style.setProperty('border', '1px solid #9CA3AF')
  autocompleteElement.style.setProperty('border-radius', '6px')

  // Add focus styling via regular CSS
  const style = document.createElement('style')
  style.textContent = `
    gmp-place-autocomplete:focus-within {
      border-color: #3B82F6 !important;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px #3B82F6 !important;
    }
  `
  document.head.appendChild(style)
}

Why This Matters

This update represents a significant improvement in developer experience:

  1. Cleaner Code: Reduced from ~150 lines to ~15 lines
  2. More Reliable: No more monkey-patching browser APIs
  3. Future-Proof: Uses Google's official API instead of workarounds
  4. Better Performance: No DOM manipulation overhead
  5. Maintainable: Easier to understand and modify

The color-scheme Property

The most important property for many developers will be color-scheme. By default, Google's component adapts to the user's system theme (light/dark). Setting color-scheme: light forces the component to always use light theme colors, preventing dark mode adaptation that might conflict with your design.

Migration Path

If you're currently using the Shadow DOM approach from my previous post, the migration is straightforward:

  1. Remove the setupShadowDOMStyling() method
  2. Replace it with the new setupAutocompleteStyles() method
  3. Use Google's official CSS properties instead of internal Shadow DOM styling

Conclusion

This update is a perfect example of why sometimes the "hack" solutions we implement as developers eventually become official features. Google listened to developer feedback about styling limitations and provided a proper API for customization.

The complex Shadow DOM manipulation we documented in the original blog post served its purpose, but now we can embrace a cleaner, more maintainable approach using Google's official CSS properties.

References