自定义标签在html解析阶段被当作htmlunknownelement处理，不报错也不跳过；需通过customelements.define()提前注册并手动upgrade已存在节点，否则不触发生命周期。
自定义标签在HTML解析阶段就被当作未知元素处理
浏览器解析HTML时，遇到<sql-query></sql-query>或<math-expr></math-expr>这类非标准标签，不会报错，也不会跳过，而是直接创建HTMLUnknownElement实例——它继承自HTMLElement，但没有任何默认语义、样式或行为。这意味着：document.querySelector('sql-query')能取到节点，el.tagName返回"SQL-QUERY"（全大写），但getComputedStyle(el).display是"inline"，el.role为空，无障碍树里不生成可读名。
常见错误现象包括：
- CSS设了
width: 100%却无效——因为默认display: inline，必须显式声明display: block或display: flex -
<custom-section><h2>标题</h2></custom-section>中，<h2></h2>仍计入全局大纲层级，不会重置节内编号 - 搜索引擎抓取内容，但完全忽略其结构权重——它只认
<section></section>、<article></article>等白名单标签
customElements.define()不是“解析引擎注入”，而是注册时机控制
customElements.define()本身不修改HTML解析器行为，它只是告诉浏览器：“当未来遇到这个标签名时，用这个类构造实例”。关键约束是：它必须在HTML解析完成前执行。如果<user-card></user-card>已在DOM中存在，再调用customElements.define('user-card', UserCard)，该节点不会自动升级——connectedCallback永远不会触发。
正确做法有两类：
- 脚本放在所有使用该标签的HTML之前（推荐内联
<script></script>或type="module" defer） - 若无法控制HTML顺序（如CMS输出），需手动升级：
customElements.upgrade(document.querySelector('user-card'))，或遍历document.querySelectorAll('user-card')批量调用 - 动态插入（如
el.innerHTML = '<user-card></user-card>'）后，必须立即对新节点调用customElements.upgrade()
Shadow DOM才是真正的样式与结构隔离边界
Custom Elements本身不提供任何隔离能力。attachShadow({ mode: 'closed' })是唯一生效路径——它在构造函数中创建独立DOM树，阻断外部CSS选择器穿透，也切断全局document上下文对内部节点的影响。
容易踩的坑：
- 把
attachShadow()写在connectedCallback里：此时DOM已挂载，Shadow Root无法接管渲染，样式仍暴露在外 - 用
mode: 'open'：外部脚本能通过el.shadowRoot直接操作内部样式表，等于放弃沙箱 - 往
shadowRoot.innerHTML里拼<style></style>或<script></script>：内联<style></style>会逃逸到全局，<script></script>仍在主文档上下文中执行
安全注入样式应走adoptedStyleSheets API（Chrome 73+/Safari 16.4+支持），HTML结构则需用DOMParser提取并清理脚本后注入。
attributeChangedCallback不处理初始属性，必须手动补读
写<json-viewer data='{"a":1}'></json-viewer>时，data是静态attribute，attributeChangedCallback完全不触发。这是设计使然——它只响应JS运行时的变更（如el.setAttribute('data', '{"b":2}')或el.data = '{"b":2}'，前提是定义了setter）。
初始化逻辑必须放在connectedCallback里：
- 用
this.getAttribute('data')读取原始值 - 用
this.hasAttribute('data')判断是否存在 - 配合私有标记（如
this._isRendered）防重复执行——因为connectedCallback会在元素反复进出DOM时多次触发
更隐蔽的问题是：若属性值含HTML实体或特殊字符（如data='"hello"'），getAttribute()返回的是解码后字符串，而dataset则自动转为驼峰，二者行为不一致，需按需选用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
