自定义地理服务组件必须继承HTMLElement并用短横线命名（如<geo-locator>），在connectedCallback中初始化，通过requestLocation()方法显式触发定位，检查navigator.geolocation支持性，用事件而非属性传递坐标，避免硬编码经纬度。
不能靠 <meta name="geo.position"> 这类标签封装地理位置服务组件——它们被浏览器和搜索引擎完全忽略，起不到任何作用。
用 Custom Elements API 封装地理服务组件的正确入口
核心是继承 HTMLElement，在 connectedCallback() 中触发定位逻辑，而不是往 <head> 里塞无效 meta 标签。自定义元素必须带短横线（如 <geo-locator>），否则浏览器会拒绝注册。
- 必须调用
customElements.define("geo-locator", GeoLocator)，标签名不合法会直接报TypeError: Failed to execute 'define' on 'CustomElementRegistry' - 构造函数里不能操作
this.innerHTML或读取this.children，此时 DOM 还未挂载，要用connectedCallback做初始化 - 如果需要传参（比如是否启用高精度、超时时间），统一通过
getAttribute()读取字符串属性，再手动转类型：this.getAttribute("high-accuracy") === "true"
在自定义组件里安全调用 navigator.geolocation
浏览器只允许在用户交互（如点击）或安全上下文（HTTPS）中触发定位请求。connectedCallback 是自动执行的，不能直接在这里调用 getCurrentPosition()，否则大概率被静默拦截或抛出 NotAllowedError。
- 推荐暴露一个方法如
requestLocation()，由外部显式调用（例如绑定到按钮onclick） - 调用前务必检查支持性：
if (!navigator.geolocation) { /* 降级提示 */ }，Safari 某些版本或禁用 JS 的环境会直接缺失该对象 - 不要忽略
options参数：设{ enableHighAccuracy: true, timeout: 10000, maximumAge: 30000 }能显著改善弱信号下的成功率，但会延长首次响应时间
避免把坐标硬编码进 HTML 结构
很多开发者试图在自定义标签上写死坐标：<geo-locator latitude="39.9042" longitude="116.4074"></geo-locator>。这看似方便，实则混淆了「服务」和「数据」——组件职责是获取/管理位置，不是存储静态坐标。
立即学习“前端免费学习笔记（深入）”；
- 坐标应作为组件的内部状态（
this._position），通过事件（如dispatchEvent(new CustomEvent("location-ready", { detail }))）向外通知，而非暴露为可读属性 - 若需预设初始位置（如地图中心点），应另设
init-latitude这类只读配置属性，并在地图渲染阶段使用，不参与定位流程 - 直接把经纬度写进 DOM 属性，会导致 SSR 渲染时服务端无法获取真实用户位置，且破坏同构一致性
真正难处理的是权限拒绝后的状态同步——用户点“禁止”后，组件既不能重试，也不能假装有数据。这时候得靠 permissionStatus.state 实时监听变化，而这个 API 在 iOS Safari 上仍受限，得准备兜底文案。
