如何通过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 中拼接
