不能直接用 customElements.define() 封装 navigator.geolocation，因其是无 DOM 的纯逻辑 API，不满足自定义元素需继承 HTMLElement 并响应生命周期钩子的要求；自动调用会触发浏览器权限拒绝（NotAllowedError），必须由用户手势显式触发定位，且仅能封装为配置容器与事件分发器。
为什么不能直接用 customElements.define() 封装 navigator.geolocation
因为 navigator.geolocation 是浏览器原生 API，它不返回 DOM 节点，也不具备可实例化、可挂载的生命周期语义。自定义元素必须继承 HTMLElement 并响应 connectedCallback 等钩子，而地理定位本身是纯逻辑行为——你无法把「请求用户授权」这个动作绑定到元素插入 DOM 的瞬间而不触发副作用或违反权限策略。
<geo-locator> 只能做状态容器，不是定位执行器
真正可行的封装方式，是让自定义元素只负责：暴露配置、缓存结果、派发事件、响应属性变更。定位调用仍需由开发者显式触发（比如监听按钮点击），否则会因自动调用导致 Chrome/Firefox 拒绝静默请求（NotAllowedError: Location request denied）。
- 必须将
getCurrentPosition()或watchPosition()的调用时机交给外部控制，例如绑定在button的click上 -
enableHighAccuracy、timeout、maximumAge应作为 element 的observedAttributes，但仅用于后续调用时透传，不主动触发定位 - 成功后应通过
this.dispatchEvent(new CustomEvent('position-ready', { detail }))通知父组件，而不是直接修改innerHTML - 错误也必须转为事件（如
'position-error'），避免在元素内部console.error后无感知失败
实际可运行的轻量封装示例
以下是一个符合规范、可直接复制使用的 <geo-locator> 定义：
class GeoLocator extends HTMLElement {
static get observedAttributes() {
return ['high-accuracy', 'timeout', 'max-age'];
}
constructor() {
super();
this._watchId = null;
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
// 仅更新内部 config，不触发定位
}
get highAccuracy() { return this.hasAttribute('high-accuracy'); }
get timeout() { return Number(this.getAttribute('timeout')) || 5000; }
get maxAge() { return Number(this.getAttribute('max-age')) || 0; }
start() {
if (!navigator.geolocation) {
this.dispatchEvent(new CustomEvent('position-error', {
detail: { code: 'UNAVAILABLE', message: 'Geolocation not supported' }
}));
return;
}
const options = {
enableHighAccuracy: this.highAccuracy,
timeout: this.timeout,
maximumAge: this.maxAge
};
this._watchId = navigator.geolocation.watchPosition(
(pos) => this.dispatchEvent(new CustomEvent('position-ready', { detail: pos })),
(err) => this.dispatchEvent(new CustomEvent('position-error', { detail: err })),
options
);
}
stop() {
if (this._watchId !== null) {
navigator.geolocation.clearWatch(this._watchId);
this._watchId = null;
}
}
}
customElements.define('geo-locator', GeoLocator);
用法：<geo-locator high-accuracy timeout="8000"></geo-locator>，然后在 JS 中调用 document.querySelector('geo-locator').start()。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的关键限制
即使封装得再“干净”，以下三点无法绕过：
- 所有现代浏览器要求
navigator.geolocation必须在安全上下文（HTTPS 或localhost）中调用，HTTP 页面直接报SecurityError - 首次调用
getCurrentPosition()或watchPosition()时，浏览器弹窗权限请求只能由**用户手势触发**（如 click、tap），任何自动执行（connectedCallback里调）都会失败 -
watchPosition()返回的watchId是全局唯一的整数，不能跨 iframe 或跨 tab 复用；若封装中未正确clearWatch，会导致内存泄漏和重复回调
