真正起效的是 symbol + 生命周期回调配合，必须避开 constructor 里读属性、写 dom；#privatefield 因升级机制易导致 dom 未挂载就操作而失败；symbol 私有键需在模块顶层声明，仅在 connectedcallback 或之后读写。
自定义元素的私有成员不能靠 private 字段或闭包变量“一劳永逸”——真正起效的是 Symbol + 生命周期回调配合，且必须避开 constructor 里读属性、写 DOM 这类常见误操作。
为什么不能直接用 private 字段存状态？
ES2022+ 的 #privateField 确实能限制外部访问，但浏览器对自定义元素的升级（upgrade）机制会导致：元素被 HTML 解析器提前创建（此时 constructor 已执行），但 connectedCallback 尚未触发；若你在 constructor 里依赖 #privateField 初始化 UI 或监听属性，会因 DOM 尚未挂载而失败，甚至抛出 NotSupportedError。
更实际的问题是：#privateField 在 attributeChangedCallback 中可用，但无法被 connectedCallback 安全复用（比如你写了 this.#render()，而 #render 又依赖尚未同步的属性值）。
所以真正稳定的做法是：用 Symbol 做键名，把私有状态存在实例上，同时确保所有读写都发生在 connectedCallback 或之后。
Symbol 私有键必须在模块作用域声明
把 Symbol 写在类内部（比如 constructor 里 const id = Symbol('id')）毫无意义——每次实例化都会生成新符号，根本起不到“私有”作用。正确做法是：
- 在模块顶层（或 IIFE 闭包内）声明一次：
const _id = Symbol('id'); - 在
constructor中初始化：this[_id] = null; - 在
connectedCallback或attributeChangedCallback中读写：this[_id] = this.getAttribute('data-id'); - 绝不用
Symbol.for('id')——它注册全局表，多个组件会互相污染
注意：JSON.stringify(this) 会自动忽略所有 Symbol 键，序列化结果里看不到私有字段，这是预期行为。
生命周期里哪些地方能安全读写私有成员？
私有成员不是“放哪儿都行”，它的读写时机必须和 DOM 状态对齐：
-
constructor：只做super()、this.attachShadow()、this[_key] = defaultValue—— 不能调this.getAttribute()，不能操作this.innerHTML -
connectedCallback：可安全读属性（this.getAttribute('size')）、渲染模板、设置this[_state]、绑定事件；但要注意它可能被多次触发（如元素被移出又插入），需加if (!this._initialized) { ...; this._initialized = true; } -
attributeChangedCallback：只响应已声明在static observedAttributes里的属性；初始值不会触发它，所以首次渲染前得手动同步：connectedCallback() { this._syncFromAttributes(); }
例如，你想让 <my-input value="hello"></my-input> 初始就显示 “hello”，就不能只靠 attributeChangedCallback，必须在 connectedCallback 里主动调一次 this._updateValue(this.getAttribute('value'))。
别把 data- 属性当私有成员用
data- 属性是公开的、可被任意 JS 修改、会出现在 DOM inspector 里，根本不是私有机制。它适合存配置参数（如 data-api-endpoint），但不适合存内部状态（如 data-is-loading）。
真正需要隐藏的状态，比如缓存的计算结果、定时器 ID、内部引用节点，必须用 Symbol 键或 #privateField（前提是确保所有访问都在生命周期安全区）。否则，用户用 el.dataset.isLoading = 'true' 就能绕过你的逻辑。
最易被忽略的一点：私有成员的“私有性”只对 JS 代码有意义，对 DOM 结构、DevTools、网络请求完全不设防——如果你真要隔离敏感数据，得靠服务端控制，而不是前端字段命名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
