web components通过customelements.define()注册带连字符的自定义元素、attachshadow启用封装、attributechangedcallback响应属性变化、slot分发内容，实现原生、安全、可复用的组件化。
原生功能和灵活性不是非此即彼的选择，而是通过 Web Components 的标准机制天然协同的——关键在 customElements.define() 的注册时机、shadowRoot 的使用边界，以及是否误把 HTML 片段复用当成了真正的组件化。
customElements.define() 必须带连字符，否则直接报错
浏览器靠连字符区分原生标签和自定义元素，这是硬性规范，不是风格建议。写成 <mybutton></mybutton> 或 <mybutton></mybutton> 会触发 Failed to execute 'define' on 'CustomElementRegistry': The name must contain a dash. 错误。
-
customElements.define('loading-button', LoadingButton, { extends: 'button' })合法，且能继承原生button行为 - 若需兼容 IE，只能退回到 autonomous 元素（如
<loading-button></loading-button>），无法用is属性增强现有标签 -
constructor中必须调用super()，否则原生构造逻辑丢失，比如表单提交、焦点管理全部失效
Shadow DOM 不是必选项，但不用就等于放弃封装性
很多团队只用 customElements.define() 封装结构，却漏掉 this.attachShadow({ mode: 'open' })，结果样式全局污染、事件冒泡失控、DOM 查询越界——这本质上只是“带 class 的 div”，不是组件。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
shadowRoot后，内部样式不会泄漏，外部样式也无法穿透（除非显式用::slotted或 CSS 变量暴露定制点） - 想让父级控制子组件样式？推荐暴露
--primary-color这类 CSS 变量，而不是开放.inner类名 - 调试时发现 shadow 内容不渲染？检查是否在
connectedCallback里才操作 DOM，constructor阶段 DOM 尚未插入文档
HTML 模板复用 ≠ 组件化，动态渲染要避开 innerHTML 陷阱
直接 element.innerHTML = templateString 是最常见也最危险的“伪组件化”。它没有生命周期、无法响应属性变化、不隔离样式、还可能引入 XSS。
- 真正组件化必须依赖
attributeChangedCallback响应属性变更，例如observedAttributes列出['disabled', 'label'] - 内容分发要用
<slot></slot>，而不是拼接字符串；支持默认内容就加<slot>默认文案</slot> - 如果项目必须动态加载 HTML 片段（如从远程 fetch），务必用
DOMPurify.sanitize()过滤，不能直接注入
原生 UI 和 HTML 渲染的分工边界在哪
Wey 桌面客户端的实践很说明问题：托盘图标、窗口管理、菜单系统这些强系统集成、高响应要求的部分，全走原生；而消息体这种格式多变、需要富文本、支持 emoji/链接/附件的，交给 HTML 渲染。
- 判断依据不是“哪个更熟”，而是“是否需要与 OS 深度交互”或“内容结构是否频繁变动”
- React Native HTMLView 的思路可借鉴：把 HTML 节点映射为原生组件，而非塞进 WebView——既保性能，又不牺牲灵活性
- 最容易被忽略的是资源加载时机：HTML 消息模板若含大量
img或iframe，得配合loading="lazy"和错误 fallback，否则滚动卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
