因为div没有语义、行为和生命周期，仅是无功能的容器；重复使用导致样式难维护、交互需手动操作DOM、跨项目复用性差，真正需解决的是让封装代码被浏览器原生识别、开发者直觉理解及工具链自然支持。
为什么不能直接用
做组件？
因为
没有语义、没有行为、没有生命周期，它只是个容器。当你反复写
，改样式要全局搜，加交互要手动查 DOM，换项目还得重写一遍。
真正的问题不是“怎么封装”，而是“怎么让封装后的代码能被浏览器原生识别、被开发者直觉理解、被工具链自然支持”。所以演进方向很明确：从借用现有标签（比如用
+
），到定义专属标签（比如
）。
属性不是语法糖，是语义桥接的关键
你写
，浏览器仍把它当作
实例——这意味着它天然支持表单提交、
属性、键盘回车触发、屏幕阅读器识别为按钮。如果你直接写
，哪怕逻辑一模一样，它默认就是
，不参与表单、不响应空格键、无障碍属性得自己补。
使用
的前提是注册时指定
：
立即学习
“
前端免费学习笔记（深入）
”；
注意点：
必须调用
，否则原生行为会丢失
不能在
里操作 DOM（此时元素尚未插入文档），交互逻辑应放在
IE 完全不支持
，现代项目若需兼容旧环境，只能退回到 autonomous 元素 + 手动模拟语义
自定义标签名必须含连字符，这不是风格问题
浏览器靠这个区分原生标签和自定义标签：
合法，
或
会直接报错
。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
命名不是随便起的，它直接影响可读性和维护性：
前缀建议统一（如
、
），避免团队内不同人注册
和
冲突
不要用纯数字开头（
不合法），也不要包含大写字母（
不合法）
名字要反映职责，而不是实现方式；
比
更易懂
Shadow DOM 不是必选项，但它是隔离性的分水岭
你可以只定义一个
，在
里拼字符串塞进
，它也能工作。但它和页面其他 CSS 是裸连的——别人写了个
，你的卡片标题就变红了。
加一层 Shadow DOM 就彻底断开：
关键事实：
允许外部 JS 通过
访问，
则完全隐藏（调试困难，慎用）
是内容分发机制，不是占位符；没配
的内容会落到第一个无名
，不是“默认值”
Shadow DOM 内部无法用外部定义的 CSS 变量，除非你在 :host 上显式继承，或用
覆盖
最常被忽略的一点：Shadow DOM 不解决 JS 作用域隔离。你在 shadow 里绑的事件监听器，依然在全局执行上下文中，this 指向仍是当前组件实例，不是 shadow root。
divdiv标题
内容
buttonisisHTMLButtonElementdisabledHTMLElementis{ extends: 'button' }class LoadingButton extends HTMLButtonElement {
constructor() {
super();
}
connectedCallback() {
this.addEventListener('click', () => {
this.disabled = true;
this.textContent = '加载中…';
});
}
}
customElements.define('loading-button', LoadingButton, { extends: 'button' });constructorsuper()constructorconnectedCallbackismy-buttonmybuttonMyButtonFailed to execute 'define' on 'CustomElementRegistry': The name must contain a dashui-app-button-xx-button3d-modelMyButtoncollapsible-panelshadow-wrapperclass MyCard extends HTMLElementconnectedCallbackthis.innerHTMLh2 { color: red; }constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
mode: 'open'element.shadowRoot'closed'nameinherit