自定义元素上 display: contents 不生效，浏览器会忽略并回退为 inline 或 block；需启用 Shadow DOM 并在 :host 设置（仅新版 Chromium/Firefox 支持），否则改用语义化标签替代。
自定义元素里用 display: contents 会失效吗
会。HTML5 自定义元素（customElements.define() 注册的 class）默认是 display: inline，但更关键的是：display: contents 在自定义元素上**不生效**——浏览器会忽略它，强制回退为 display: inline 或 display: block（取决于是否设了 display 样式）。这是因为自定义元素在 Shadow DOM 未启用时仍属于“未知元素”，而 display: contents 对未知元素的支持极差（尤其在 Safari 和旧版 Chrome）。
实操建议：
- 若需让自定义元素“透出”子元素参与父容器布局，优先启用 Shadow DOM 并在
:host上设display: contents（仅 Chromium 115+ / Firefox 119+ 稳定支持） - 否则改用已知语义化标签包裹，例如把
再加 ARIA 属性 - 避免依赖
display: contents做响应式网格嵌套，它在自定义元素中不是可靠布局手段
如何让
常见错误：写成这样，以为子项能自动变 Flex 项目：
立即学习“前端免费学习笔记（深入）”；
但若 正确做法： YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。 Shadow DOM 的样式封装是硬性隔离：外部 CSS 无法选中 Shadow 内部节点，内部 CSS 也无法用 IE11 完全不支持 可行路径： 最现实的做法：只在现代浏览器中启用自定义元素布局，IE11 用户走完全不同的 HTML/CSS 分支——试图一套代码通吃，反而会让布局逻辑变得不可维护。:host 是 display: block，那两个 
:host 显式设 display: flex 或 display: grid
grid-template-areas 配合命名 slot，但注意 Safari 对 slot 的 grid-area 支持不稳定使用
attachShadow({mode: 'open'}) 后，CSS 选择器穿透限制在哪::slotted(*) 以外的方式影响外部内容。但有三个常被忽略的穿透点：
::slotted(*) 只能设置**传递进来的顶层元素**的样式（如颜色、字体），不能设 margin、flex、grid 等布局属性（它们会被忽略）:host 可以响应外部 class（如 :host([primary]) { background: blue; }），但无法响应外部伪类（:hover 必须写在 :host(:hover) 内部）--my-color）可穿透，但必须在 :host 或 ::slotted 中显式 var(--my-color)，否则不继承IE11 兼容场景下怎么安全使用自定义元素布局
customElements.define() 和
document.registerElement（已废弃但 IE11 支持），配合手动 innerHTML 渲染和 attributeChangedCallback 模拟属性响应ResizeObserver + getComputedStyle 动态计算尺寸），不依赖 HTML 结构语义
