自定义元素注册失败、属性不响应、样式失效，主要卡在constructor时机、observedAttributes声明、连字符命名三处：constructor必须调super()并立即attachShadow()；需声明static get observedAttributes()才能触发attributeChangedCallback；标签名必须含且仅含一个连字符。
自定义元素能直接用原生 Web Components 实现，无需框架；但注册失败、属性不响应、样式失效，基本都卡在 constructor 时机、observedAttributes 声明、连字符命名这三处。
constructor 必须调用 attachShadow()，否则报 Failed to execute 'attachShadow' on 'Element'
浏览器只允许在 constructor 中首次调用 this.attachShadow()。如果拖到 connectedCallback 再执行，HTML 解析器早已把子节点（比如文本、<slot>）塞进 light DOM，此时再 attach 就违反规范。
-
constructor里只做三件事：调super()、执行this.attachShadow({ mode: 'open' })、初始化私有字段或默认属性 - 别在
constructor里读this.textContent或写this.innerHTML = ''——前者为空，后者污染 light DOM - 需要访问子节点、计算尺寸、触发重排的操作，一律移到
connectedCallback中执行
attributeChangedCallback 不触发？先检查 static get observedAttributes()
HTML 属性变更不会自动同步到 JS 属性，也不会触发重绘。哪怕你写了 this.size = newValue，若没在类中声明 static get observedAttributes() 返回 ['size']，回调根本不会执行。
- 拼写必须完全一致：
'disabled'≠'Disabled'，大小写敏感 - 首次渲染时已有属性（如
<my-button size="large"></my-button>），attributeChangedCallback不会触发——得在connectedCallback里手动同步一次 -
oldValue和newValue永远是字符串，数值型需手动转：parseInt(newValue)或parseFloat(newValue)
样式必须注入 shadowRoot，外部 CSS 对 shadow 内部无效
Shadow DOM 天然隔离样式，<link rel="stylesheet"> 或全局 button { background: blue } 对 shadow 内部无影响。
立即学习“前端免费学习笔记（深入）”；
- 可行方案：用
<style></style>注入到 shadow，例如shadow.innerHTML = '<style>button{background:blue}</style><button>OK</button>' - 或创建
style元素并 append：const style = document.createElement('style'); style.textContent = '...'; shadow.appendChild(style); - 想让外部控制主题色？用 CSS 自定义属性：
:host([theme="dark"]) { --bg-color: #333; }，再在 shadow 内部用var(--bg-color)
customElements.define() 报 DOMException？检查标签名是否含且仅含一个连字符
customElements.define() 要求第二个参数是合法的自定义标签名，规则硬性：必须包含且仅含一个连字符（-），不能以数字开头，不能是保留字（如 html、script、div）。
-
my-button✅ 合法（小写、含单连字符、非保留名） -
my_button❌ 下划线不被识别 -
mybutton或MyButton❌ 都会抛出DOMException: Failed to execute 'define' on 'CustomElementRegistry': "mybutton" is not a valid custom element name -
x-button✅ 可用，但建议语义化，如date-picker、nav-menu
最易被忽略的是初始属性同步和连字符命名——前者导致“HTML 里写了 value=123，JS 里却读不到”，后者让整个组件根本注册不上，连报错都看不到。这两个点不卡死，其他逻辑才可能跑起来。
