customElements.define() 必须在 DOM 解析完成前执行，否则未注册的自定义标签无法升级；constructor 中仅可 attachShadow，属性读取和 localStorage 操作必须延迟至 connectedCallback，并显式声明 observedAttributes 才能响应属性变更。
customElements.define() 必须在 localStorage 操作前注册
浏览器解析 HTML 时，遇到未注册的自定义标签（如 <local-storage>）会直接跳过生命周期，后续调用 customElements.define() 也无法“升级”已存在的节点。这意味着：如果页面里先写了 <local-storage key="theme"></local-storage>，再执行注册，这个元素永远不会触发 constructor 或 connectedCallback。
实操建议：
- 把注册逻辑放在
<script defer>中，确保它在 DOM 解析完成前执行但又不阻塞渲染 - 避免在模块内部单独注册——多个组件文件各自调用
customElements.define('local-storage', ...)会导致重复定义错误：Failed to execute 'define': the name "local-storage" has already been used - 统一在项目入口（如
main.js）中集中注册所有自定义元素
constructor 中只能 attachShadow，不能读写 localStorage
自定义元素的 constructor 执行时机早于 DOM 挂载，此时元素尚未插入文档，this.textContent、this.getAttribute('key') 都不可靠，更不能调用 localStorage.getItem() —— 因为属性值可能还没被解析出来，且该方法在部分隐私模式下会直接抛出 SecurityError。
正确做法是把存储读取延迟到 connectedCallback：
立即学习“前端免费学习笔记（深入）”；
-
connectedCallback是首个能安全读取属性、访问this.getAttribute()、并执行同步存储操作的钩子 - 若需支持 SSR 或服务端直出，注意
localStorage在 Node.js 环境不存在，应加if (typeof localStorage !== 'undefined')判断 - 不要在
constructor里写this.attachShadow({ mode: 'open' })以外的任何 DOM 操作——浏览器只允许此处首次创建 shadowRoot，否则报错：Shadow root cannot be created on a host which already has children
attributeChangedCallback 不会自动触发，必须显式声明 observedAttributes
想让 <local-storage key="user-preferences" value="dark"></local-storage> 的 value 属性变更同步到 localStorage，光写 attributeChangedCallback 方法没用。浏览器根本不会监听，除非你明确告诉它：“我要盯住这几个属性”。
声明方式只有两种（任选其一）：
static get observedAttributes() { return ['key', 'value']; }static observedAttributes = ['key', 'value'];
常见陷阱：
- 拼写必须完全一致：
'Key'≠'key'，大小写敏感 -
attributeChangedCallback的oldValue和newValue永远是字符串，哪怕你传的是value="true"，拿到的也是"true"，不是布尔值 - 首次渲染时已有属性（比如 HTML 里直接写了
value="init"），该回调不会触发——得在connectedCallback里手动读一次localStorage.getItem(this.getAttribute('key'))做初始化
Shadow DOM 内无法用外部 CSS 控制，样式必须内联或注入
一旦调用 this.attachShadow({ mode: 'open' })，内部结构就与主文档样式隔离。localStorage 组件本身通常不渲染视觉内容，但如果你封装了带 UI 的存储控制面板（如开关、输入框），就必须把样式打进 shadowRoot。
推荐做法：
- 用
const style = document.createElement('style')创建样式节点，style.textContent = 'div { color: #333; }'，再shadowRoot.appendChild(style) - 避免依赖全局类名或 ID：
document.querySelector('.storage-toggle')在 shadow 内无效，必须用this.shadowRoot.querySelector('.storage-toggle') - 如果组件需要响应式更新 UI（比如显示当前存储值），别用
this.innerHTML = ...—— 它污染 light DOM，破坏封装；改用this.shadowRoot.innerHTML = ...或更稳妥的template.content.cloneNode(true)
真正难处理的不是读写 localStorage，而是如何让属性变更、DOM 插入、异步存储失败这三者节奏对齐——connectedCallback 可能被多次调用，attributeChangedCallback 可能批量触发，而 localStorage.setItem() 是同步但可能抛异常。这些边界情况不兜住，组件就会静默失效。
