customelements.define报domexception的三大原因：标签名不含短横线、类未继承htmlelement、重复注册同名元素；需确保标签全小写含短横线、类显式extends htmlelement且调用super()、注册前用customelements.get()校验是否已定义。
customElements.define 报 DOMException 怎么办
注册失败基本就三类原因：名字不合法、类没继承、重复注册。浏览器报错信息里通常会带具体提示，比如 DOMException: The element name must contain a hyphen 就是名字缺短横线。
-
my-button✅ 合法；mybutton❌ 无短横线直接拒收 - 类必须显式
extends HTMLElement，传对象字面量或箭头函数会静默失败 - 开发时加守卫：用
if (!customElements.get('my-button')) { customElements.define('my-button', MyButton); }避免热重载重复注册
constructor 里操作 shadowRoot 为什么总失败
因为此时元素还没挂进 DOM，this.shadowRoot 是 null，哪怕你调了 this.attachShadow()，紧接着写 this.shadowRoot.innerHTML = '...' 也大概率被丢弃——尤其在 SSR 或框架嵌套下更不稳定。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 安全时机只有
connectedCallback：它保证元素已插入文档、shadowRoot已就绪 -
constructor只做轻量初始化，比如声明私有字段、绑定this，别碰 DOM - 如果需要首次渲染后触发逻辑（比如 autofocus），别在
connectedCallback里直接调，加个requestAnimationFrame或setTimeout(() => {}, 0)
attributeChangedCallback 收不到属性变化
这个回调只响应 HTML 属性变更（setAttribute、removeAttribute、初始 HTML 中的属性），对 JS 属性赋值（如 el.checked = true）完全无感。
- 必须在
static get observedAttributes()里显式列出要监听的属性名，漏一个就收不到 - 布尔属性（如
disabled、checked）的newValue是字符串"true"或null，不是布尔值，别直接=== true - 初始 HTML 中的
<my-toggle checked></my-toggle>会触发一次回调，但oldValue是null，别拿它做相等判断
自定义元素能复用，但“标准化”得靠人定规矩
HTML 自定义元素本身不提供样式、布局、事件命名或 slot 策略的统一标准。写十个 my-button，可能五个用 click，两个发 tap，三个把图标塞在 slot="icon"，两个硬编码进 shadowRoot —— 这根本没法维护。
- 团队必须提前约定：属性名用什么（
disabled还是is-disabled）、事件名怎么命名（change还是value-changed）、哪些 slot 允许外部传内容 - Shadow DOM 模式选
open还是closed要统一，否则调试和测试方式完全不同 - 别指望浏览器替你 enforce 规范，
customElements.define不校验你的设计是否合理，只管语法是否合法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
