必须在connectedcallback中调用attachshadow，否则shadowroot为空壳、样式结构泄漏至全局；constructor仅可初始化，此时dom未挂载，queryselector必返回null，事件与样式均失效。
为什么 customElements.define 必须在 connectedCallback 里 attachShadow
不这么做，shadowRoot 就只是个空壳，所有样式和结构都跑在全局 DOM 里，隔离等于没做。浏览器解析完自定义标签后，会先调用 constructor，此时 this.shadowRoot 已存在（因为你在 constructor 里调了 attachShadow），但节点还没挂载进文档——querySelector 一定返回 null，事件绑定失败，样式也不生效。
真正能安全操作 shadow DOM 的时机，是 connectedCallback：元素已插入文档，this.shadowRoot 下的节点可查、可绑、可渲染。
-
constructor只做初始化（如设默认属性、创建 shadowRoot），别碰 DOM 查询或事件绑定 -
connectedCallback是唯一可靠入口：在这里innerHTML或appendChild模板，再addEventListener绑定内部按钮 - 如果组件需异步加载内容（如远程配置），
connectedCallback也是发起请求的合理位置，但得配合父组件控制时机，避免不可测的副作用
如何让自定义元素参与原生表单校验流程
默认情况下，checkValidity() 和 reportValidity() 在自定义元素上根本不存在，表单提交时直接被忽略。想让它“像原生 input 一样工作”，必须手动桥接 validity 状态。
核心不是重写校验逻辑，而是把内部真实 input 的状态映射出去：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 在
constructor中创建shadowRoot，并保存对内部input的引用（如this.input = this.shadowRoot.querySelector('input')） - 用
observedAttributes声明required、pattern等属性，在attributeChangedCallback中同步到this.input - 手动实现
checkValidity方法：return this.input.checkValidity()；同理实现reportValidity - 最关键的是
validity属性桥接：用Object.defineProperty把this.validity定义为this.input.validity的 getter，否则form.checkValidity()根本识别不了这个元素
为什么不能用 data- 属性传行为逻辑
data-action="submit" 或 onclick="handle()" 这类写法，本质是把行为契约硬编码在 HTML 字符串里，JS 还得靠扫描 DOM 才能识别——这等于留了后门，破坏封装边界。
真正的解耦，是让外部只通过标准属性和事件交互，所有行为由组件内部声明和响应：
- 需要控制启用/禁用，就用布尔属性：
<my-input disabled></my-input>，而不是<my-input data-disabled="true"></my-input> - 需要触发动作，就用自定义事件：
this.dispatchEvent(new CustomEvent('change', { detail: { value } }))，而非暴露handleChange函数供外部调用 - 所有事件监听必须在组件内部完成：
this.shadowRoot.querySelector('button').addEventListener('click', ...)，禁止依赖外部 JS 主动查找并绑定 - 若需配置复杂参数，统一走字符串属性 + 显式解析：
this.getAttribute('config') && JSON.parse(this.getAttribute('config'))，避免传对象或函数导致 SSR 失败
Shadow DOM 样式隔离的两个常见失效点
写了 attachShadow 不代表样式就真的隔离了。很多团队上线后才发现第三方图标库样式穿透、主题色无法覆盖，问题往往出在这两处：
- 外部
<link rel="stylesheet">加载 Foundation/Font Awesome 会污染全局，必须提取 CSS 文本，用CSSStyleSheet实例 +adoptedStyleSheets注入到shadowRoot（注意 Safari 16.4+、Chrome 73+ 才稳定支持） - 滥用
::slotted(*)重置插槽内容样式，等于主动开放布局控制权；正确做法是只用:host控制根状态，子元素样式全部写死在 shadow 内部，不穿透、不重置 - 忘了暴露 CSS 自定义属性（如
--my-input-bg）给外部定制，结果产品提改色需求，开发只能改源码发新包——应在:host中预留 2–3 个高频变量，并在 README 明确用途
Shadow DOM 的边界很硬，但也很脆：漏掉一个 adoptedStyleSheets，或错用一个 ::slotted，整个隔离就塌了一角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
