customElements.define() 是封装可复用状态容器最直接方式，需继承 HTMLElement、用 attachShadow 隔离样式、observedAttributes 声明响应属性、attributeChangedCallback 触发 render 更新视图。
用 customElements.define() 封装可复用的状态容器
HTML 原生支持自定义元素，customElements.define() 是实现轻量级状态容器最直接的方式——不依赖框架、不引入构建工具，浏览器原生支持。关键不是“造轮子”，而是把状态逻辑和 DOM 生命周期绑定清楚。
常见错误是直接在 connectedCallback 里写渲染逻辑却不做重复连接防护，导致多次挂载时重复追加内容；或者把状态存在实例属性上却没配合 attributeChangedCallback 响应外部变更。
- 必须继承
HTMLElement，并在constructor中调用super() - 用
this.attachShadow({ mode: 'open' })隔离样式，避免污染全局 - 监听属性变化：在
observedAttributes静态 getter 中声明要响应的属性名（如['value', 'disabled']） - 状态更新统一走
render()方法，每次变更后显式调用，保证视图与数据一致
示例：一个带 loading 状态的按钮容器
class StatusButton extends HTMLElement {
static get observedAttributes() { return ['value', 'loading']; }
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>button { padding: 8px 16px; border: none; }</style>
<button><slot></slot></button>
`;
}
get value() { return this.getAttribute('value') || ''; }
set value(v) { this.setAttribute('value', v); }
get loading() { return this.hasAttribute('loading'); }
set loading(v) {
if (v) this.setAttribute('loading', '');
else this.removeAttribute('loading');
}
render() {
const btn = this.shadowRoot.querySelector('button');
btn.disabled = this.loading;
btn.textContent = this.loading ? '处理中...' : this.value || '提交';
}
connectedCallback() { this.render(); }
attributeChangedCallback() { this.render(); }
}
customElements.define('status-button', StatusButton);
用 sessionStorage 实现跨组件共享状态容器
当多个自定义组件需要读写同一份状态（比如表单步骤、主题色、用户偏好），又不想引入全局 store，sessionStorage 是最轻量、最可控的选择。它天然隔离标签页、页面刷新不丢失、无需手动清理过期项。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑是直接用 sessionStorage.setItem('key', obj) —— 这会报错，因为值必须是字符串。另一个问题是未处理 storage 事件监听时机，导致新挂载组件收不到初始状态。
- 状态序列化统一用
JSON.stringify()，反序列化加try/catch防止损坏数据 - 封装读写函数，例如
setState(key, value)和getState(key, defaultValue) - 在组件
connectedCallback中先读取一次初始值，再监听window.addEventListener('storage', ...) - 避免高频写入：对输入框等连续变更场景，用
debounce或只在blur时同步
示例：共享当前选中的导航 tab
function setNavTab(tabId) {
sessionStorage.setItem('nav-tab', JSON.stringify({ id: tabId, ts: Date.now() }));
}
function getNavTab() {
try {
const raw = sessionStorage.getItem('nav-tab');
return raw ? JSON.parse(raw) : { id: 'home' };
} catch {
return { id: 'home' };
}
}
// 在自定义 tab 组件中：
connectedCallback() {
this.currentTab = getNavTab().id;
window.addEventListener('storage', (e) => {
if (e.key === 'nav-tab') this.currentTab = JSON.parse(e.newValue).id;
});
}
用 <template> + content.cloneNode(true) 实现模板化状态容器
纯 HTML 模板比 JS 字符串拼接更安全、更易维护，<template> 元素天生不渲染、不执行脚本，适合做状态容器的结构骨架。关键是要理解 cloneNode(true) 的行为：它复制的是静态结构，不会保留事件监听器或已绑定的数据引用。
常见误用是把模板写在组件内部（导致多次定义）、或在 connectedCallback 中反复 clone 却不清理旧节点，造成内存泄漏。
- 模板必须放在
<body>外或<head>中，确保全局唯一且不被意外渲染 - 每次 clone 后，用
shadowRoot.appendChild()插入，而不是innerHTML = ... - 动态内容填充用
querySelector定位占位节点，再用textContent或setAttribute更新，不要直接操作 innerHTML - 若需绑定事件，应在 clone 后对返回的节点显式添加
addEventListener
示例：一个带状态提示的卡片容器
<template id="status-card">
<div class="card">
<header class="card__header"><slot name="title">默认标题</slot></header>
<main class="card__body"><slot name="content"></slot></main>
<footer class="card__footer">
<span class="status-indicator"></span>
</footer>
</div>
</template>
// 在组件中：
const template = document.getElementById('status-card');
const content = template.content.cloneNode(true);
this.shadowRoot.appendChild(content);
const indicator = this.shadowRoot.querySelector('.status-indicator');
indicator.textContent = this.hasError ? '❌ 错误' : '✅ 正常';
为什么不用 localStorage 或全局变量做状态容器
localStorage 看似方便，但实际在轻量级场景下是过度设计：它跨标签页持久化，导致多窗口操作时状态冲突；没有过期机制，旧数据残留难清理；写入阻塞主线程，高频更新会卡顿。全局变量则完全破坏封装性，任意脚本都能篡改状态，调试时根本分不清谁改了哪条数据。
真正需要“跨会话留存”的场景极少，95% 的前端状态生命周期就限定在一次浏览会话内。用 sessionStorage 或组件实例属性 + 自定义事件通信，已经足够覆盖表单暂存、折叠展开、暗色模式切换等绝大多数需求。
复杂点在于：状态边界必须清晰——哪个组件 owns 哪个状态，变更是否需要广播，是否允许外部强制重置。这些不能靠约定，得靠封装时的 API 设计体现出来，比如只暴露 setValue() 不暴露 state 属性，或提供 reset() 但不提供 clearAll()。
