custom-element 默认不响应 CSS 是因为浏览器将其视为未知元素，按 display: inline 处理且无 UA 样式继承，必须显式声明 display、box-sizing、font、color 等基础样式才能正常渲染。
直接改 custom-element 标签的 CSS 是无效的，因为浏览器不识别它为内置元素，也不自动赋予样式继承链——必须显式声明 display、box-sizing 等基础样式，否则表现不可控。
为什么 custom-element 默认不响应 CSS？
自定义元素（如 my-button、data-grid）本质是“未知 HTML 元素”，浏览器按 display: inline 处理，且不继承 font、color 等根级样式。它不像 div 或 span 那样有默认 UA 样式表规则。
- 没有默认
display值（不是block或inline-block） -
margin、padding在部分旧版 Safari 中被忽略 -
:host伪类只在 Shadow DOM 内部生效，对外部样式无效
如何让外部 CSS 正确作用于自定义元素？
关键是在全局样式中给它一个明确的“身份”：指定 display 类型，并补全基础盒模型行为。
- 至少设置
display: block或display: inline-block（根据语义选） - 加上
box-sizing: border-box，避免 padding/margin 计算混乱 - 显式继承文字相关属性：
font: inherit、color: inherit、line-height: inherit - 若需支持 focus 状态，记得加
outline: none并用box-shadow替代（避免可访问性问题）
示例：
立即学习“前端免费学习笔记（深入）”；
my-card {
display: block;
box-sizing: border-box;
font: inherit;
color: inherit;
line-height: inherit;
}
Shadow DOM 内部样式重写要注意什么？
如果自定义元素用了 Shadow DOM，外部 CSS 无法穿透到内部节点（除非用 ::part() 或 :host），这时重写逻辑要分层处理。
-
:host只能修饰自定义元素自身，不能选子元素 - 想暴露内部结构供外部定制？得用
part="label"+::part(label)，但 IE/旧 Edge 不支持 -
:host(.active)依赖组件主动 toggle class，不能靠外部 class 强制注入 - 避免在
:host里写width: 100%这类可能被父容器约束失效的值
兼容性与性能陷阱
IE 完全不支持自定义元素（v1 规范），即使加了 polyfill，CSS 重写也常因缺少 attachShadow 而降级为普通 div 模拟——此时所有样式规则必须同时适配两种模式。
- 不要依赖
:host-context(body.theme-dark)，它在 Safari 15.4 前不工作 - 大量使用
::part()会拖慢样式计算，尤其嵌套层级深时 - 动态插入自定义元素后，若未触发
connectedCallback，样式可能延迟应用
真正麻烦的不是怎么写样式，而是判断该样式到底该由宿主控制，还是封装在组件内部——边界模糊时，!important 往往是妥协信号，说明职责没划清。
