如何通过HTML自定义元素实现符合标准的插件架构

一分耕耘，一分收获！既然打开了这篇文章《如何通过HTML自定义元素实现符合标准的插件架构》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

自定义元素命名必须含连字符且全小写，如date-picker；constructor仅初始化，DOM操作须在connectedCallback中执行；样式必须注入Shadow DOM；attributeChangedCallback需配合observedAttributes监听属性变更。

自定义元素命名必须含连字符且全小写

浏览器会直接拒绝注册不合规的名称，比如 mybutton、MyButton、userprofile 都会抛出 DOMException: The name "xxx" is not a valid custom element name。只有带 ASCII 短横线（-）且全小写的名称才被接受，例如 date-picker、status-badge、user-card。

命名不是风格问题，是强制校验：调用 customElements.define() 时立刻失败，不会进入后续逻辑。别指望靠 try/catch 挽救——错误发生在注册阶段，组件根本没机会初始化。

• 禁止使用下划线（my_button）、大写字母（MyButton）、单个单词（button）
• 禁止与原生标签重名（div、slot、template 等都会报错）
• 语义优先，但需兼顾可读性与唯一性；避免过度缩写如 usr-crd

constructor 只能做基础初始化，DOM 操作必须在 connectedCallback

很多人把渲染逻辑全塞进 constructor，结果发现样式不生效、属性读不到、this.shadowRoot 是 null。这是因为 constructor 执行时元素尚未挂载到文档，DOM 上下文不可用。

正确分工是：constructor 仅调用 super()、创建 Shadow DOM（this.attachShadow({ mode: 'open' })）、声明私有字段或绑定方法；所有涉及 DOM 查询、属性读取、事件监听、innerHTML 设置，都必须移入 connectedCallback。

• attributeChangedCallback 不会触发初始属性值——首次渲染仍得在 connectedCallback 里手动读取 this.getAttribute('xxx')
• 若组件支持多次挂载/卸载（如路由切换），disconnectedCallback 应清理定时器、事件监听器，防止内存泄漏
• 不要在 constructor 中调用 fetch 或触发自定义事件，时机不对，接收方很可能还没准备好

样式必须注入 Shadow DOM，不能依赖外部 CSS 文件

把 放在自定义元素内部或试图用 @import 加载外部样式，基本无效。Shadow DOM 的样式隔离机制决定了：样式必须显式写入 shadowRoot.innerHTML 或通过 adoptedStyleSheets 注入（需现代浏览器支持）。

最稳妥的做法是在 connectedCallback 中拼接