web components 实现扁平化按钮需合规命名、在 connectedcallback 中操作 dom、手动同步原生属性，并为 safari 补全 border/background/outline 等视觉锚点以避免透明失效。
Web Components 实现扁平化按钮，核心不是“重造轮子”，而是用自定义元素封装语义正确、样式可控、行为合规的按钮逻辑。它适合跨框架统一调用、强制样式隔离或内置国际化等特定场景；日常开发中，<button class="btn-flat"></button> + CSS 更轻量可靠。
命名与注册必须合规
自定义元素名必须含短横线且全小写，否则 customElements.define() 直接报错：
- ✅ 正确：
customElements.define('wc-button', WcButton) - ❌ 错误：
customElements.define('flatbutton', ...)（缺短横线） - ❌ 错误：
customElements.define('wc-button-', ...)（结尾短横线非法）
生命周期里安全操作 DOM
constructor 中可创建 shadow root，但所有 DOM 渲染、事件绑定、属性同步都必须放在 connectedCallback 中——此时元素已挂载，this.shadowRoot 稳定可用：
- 在
connectedCallback中设置this.shadowRoot.innerHTML或appendChild - 在这里为内部
<button></button>绑定click、focus等事件 - 注意该回调可能被多次触发（如元素移出再插入），需自行防重或清理旧监听器
手动同步原生属性与行为
Web Component 不自动继承 disabled、type、name、value 等表单属性，必须显式透传，否则表单提交、键盘焦点、屏幕阅读器识别都会失效：
-
disabled：同步到内部<button></button>，并设tabindex="-1"和aria-disabled="true" -
type：仅支持"button"、"submit"、"reset"，且"submit"需父级为<form></form>才生效 -
name与value：必须赋值给内部<button></button>，否则表单序列化时不会包含
扁平化样式需绕过 Safari 的陷阱
若在 shadow DOM 中使用 appearance: none（常见于扁平化重置），Safari（iOS 16+ / macOS Ventura 起）会清空所有默认样式且不 fallback，导致按钮完全透明、不可点击：
- 必须立即补全基础视觉锚点：
border: 1px solid transparent（哪怕要“无边框”，透明边框能稳定 focus outline 位置） -
background-color必须显式声明，例如background-color: #fff或transparent（后者需确保父背景可辨识） - 焦点样式不能删
outline，应改用outline: 2px solid #007bff; outline-offset: 2px，或用box-shadow自定义并配outline: none -
border-radius控制在 2–4px，避免拉到 50%；禁用常态text-shadow，不靠阴影模拟立体感
