自定义元素上 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+ 稳定支持） - 否则改用已知语义化标签包裹，例如把
<my-card></my-card>替换为<article role="region"></article>再加 ARIA 属性 - 避免依赖
display: contents做响应式网格嵌套，它在自定义元素中不是可靠布局手段
如何让 <slot></slot> 正确继承父级 Flex/Grid 布局
<slot></slot> 本身不渲染，它的子节点（即分发内容）是否参与父容器的 Flex/Grid，取决于**宿主元素（custom element）自身的 display 类型**，而非 <slot></slot> 标签。
常见错误：写成这样，以为子项能自动变 Flex 项目：
立即学习“前端免费学习笔记（深入）”；
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
<my-grid> <div slot="item">A</div> <div slot="item">B</div> </my-grid>
但若 <my-grid></my-grid> 的 :host 是 display: block，那两个 <div> 就只是普通块级流，不会变成 flex item。
<p>正确做法：</p>
<ul>
<li>在自定义元素的 Shadow DOM 中，给 <code>:host 显式设 display: flex 或 display: grid
<slot></slot> 是直接子元素（不能套 <div> 包裹），否则分发内容被隔了一层，无法直接受控
<li>如需多 slot 分区布局（如 header/item/footer），用 <code>grid-template-areas 配合命名 slot，但注意 Safari 对 slot 的 grid-area 支持不稳定使用 attachShadow({mode: 'open'}) 后，CSS 选择器穿透限制在哪
Shadow DOM 的样式封装是硬性隔离：外部 CSS 无法选中 Shadow 内部节点，内部 CSS 也无法用 ::slotted(*) 以外的方式影响外部内容。但有三个常被忽略的穿透点：
-
::slotted(*)只能设置**传递进来的顶层元素**的样式（如颜色、字体），不能设margin、flex、grid等布局属性（它们会被忽略） -
:host可以响应外部 class（如<my-button primary></my-button>→:host([primary]) { background: blue; }），但无法响应外部伪类（:hover必须写在:host(:hover)内部） - 全局 CSS 变量（
--my-color）可穿透，但必须在:host或::slotted中显式var(--my-color)，否则不继承
IE11 兼容场景下怎么安全使用自定义元素布局
IE11 完全不支持 customElements.define() 和 <slot></slot>，所谓“兼容”只能靠降级方案，没有真正意义上的布局复用。
可行路径：
- 用
document.registerElement（已废弃但 IE11 支持），配合手动innerHTML渲染和attributeChangedCallback模拟属性响应 - 放弃 Shadow DOM，所有样式用外部 class 控制，把自定义元素当纯语义占位符（如
<my-tabs></my-tabs>→ 渲染为<div class="tabs">...</div>） - 布局逻辑全部抽到 JS 层（如用
ResizeObserver+getComputedStyle动态计算尺寸），不依赖 HTML 结构语义
最现实的做法：只在现代浏览器中启用自定义元素布局，IE11 用户走完全不同的 HTML/CSS 分支——试图一套代码通吃，反而会让布局逻辑变得不可维护。
