如何访问新版Google Maps Places Autocomplete组件的内部<input>？

不用去碰封闭Shadow DOM，Google Maps Web组件本身就提供了官方的属性和事件来满足你的需求，完全不需要访问内部的<input>元素：

• 直接获取当前输入值
  gmp-place-autocomplete组件本身暴露了value属性，直接读取这个属性就能拿到输入框的实时文本内容，包括点击清除按钮后的空字符串。比如：

  const autocompleteEl = document.querySelector('gmp-place-autocomplete');
  const currentInputValue = autocompleteEl.value;
  

• 监听输入变化（含清空操作）
  给组件绑定标准的input事件，这个事件会在用户输入字符、删除字符，以及点击输入框右侧的清除“×”按钮时触发，完美覆盖你的场景。

  以Angular为例，模板中可以这样写：

  <gmp-place-autocomplete (input)="handleAutocompleteInput($event)"></gmp-place-autocomplete>
  

  对应的组件类逻辑：

  handleAutocompleteInput(event: Event) {
    const autocomplete = event.target as typeof HTMLInputElement & { value: string };
    const inputValue = autocomplete.value;
    
    if (!inputValue) {
      // 输入框已清空的处理逻辑
      console.log('输入内容已被清空');
    } else {
      // 处理输入内容
      console.log('当前输入:', inputValue);
    }
  }
  

• 额外补充：监听地点选择事件
  如果需要监听用户选择具体地点的动作，可以绑定gmp-place-select事件，不过这个事件只在用户从下拉列表中选择地点时触发，不会响应手动清空输入的操作，适合和input事件配合使用。

注意：永远不要尝试破解封闭Shadow DOM来访问内部元素——封闭Shadow DOM的设计初衷就是隔离组件内部实现，Google随时可能修改内部结构，依赖内部元素的代码会很容易失效。使用官方暴露的API才是长期可靠的方案。

内容的提问来源于stack exchange，提问作者Ali Alizade