Safari旧版不渲染HTML5新标签需CSS重置display: block；dialog API需检测'showModal' in dialog再调用；@supports selector()在Safari 16.4前无效；Web Components的shadow DOM样式穿透存在兼容问题。
HTML5新标签在Safari中直接不渲染怎么办
Safari（尤其 iOS 15.4 及更早、macOS Monterey 及旧版）对部分 HTML5 语义化标签（如 <dialog>、<details>、<summary>、<main>）默认不识别为块级元素，导致样式失效或内容塌陷——不是你 CSS 写错了，是 Safari 根本没把它当“标签”看。
核心解法就一条：用 CSS 显式声明 display: block 或对应行为：
-
<dialog>必须加display: block+position: relative才能正常显示；iOS Safari 还得手动处理open属性的样式切换 -
<main>、<section>、<article>等虽被识别，但旧 Safari（≤12.1）不自动设display: block，需统一重置 -
<details>+<summary>在 Safari 15.4 前不支持open属性动画，且<summary>默认是 inline，容易换行错乱
推荐在全局样式开头加一段最小兼容重置：
main, nav, section, article, aside, header, footer, dialog, details, summary {
display: block;
}
summary {
display: list-item;
}
Safari不支持dialog.showModal()报错undefined is not a function
这是最典型的运行时错误——Safari 直到 15.4 才开始实验性支持 <dialog> API，且需开启「Experimental Features」里的「Dialog Element」；iOS Safari 则至今（iOS 17.5）仍不支持 showModal() 方法。
立即学习“前端免费学习笔记（深入）”；
不能直接调用，必须先检测：
- 检查
HTMLDialogElement构造函数是否存在，而非只判断dialog.showModal是否为函数（Safari 15.4 有元素但无方法） - 用
if ('showModal' in document.createElement('dialog'))更可靠 - 降级方案别用
alert()或简单visibility: hidden，要模拟 backdrop 和 focus trap，否则键盘导航和屏幕阅读器会出问题
简短检测示例：
const dialog = document.querySelector('dialog');
if ('showModal' in dialog) {
dialog.showModal();
} else {
// 启用 polyfill 或 fallback 弹层
}
CSS @supports selector(:has()) 在 Safari 中完全无效
Safari 15.4 开始支持 :has()，但仅限于某些简单场景；而 @supports selector() 这个特性本身，Safari 直到 16.4 才支持——所以你在 Safari 16.3 及更早版本里写 @supports selector(:has(> div))，整段 CSS 规则会被忽略，连兜底样式都不会生效。
这不是语法写错，是浏览器压根不解析这行 @supports 声明：
- 别依赖
@supports selector()做关键布局分支，它在 Safari 中的兼容性比:has()本身还滞后 - 需要条件样式时，优先用 JS 检测
document.querySelector(':has(...)')是否返回非 null，再动态加 class - 若必须用 CSS 方案，改用属性选择器或类名标记（如
[data-has-child]），由 JS 提前打标
Web Components 的 shadow DOM 在 Safari 中样式穿透异常
Safari 对 ::slotted、:host-context() 和 part 属性的支持较弱，尤其在嵌套自定义元素中，::slotted(*) 容易漏匹配，:host-context(.dark) 在 Safari 16.3 前基本不工作。
真正影响上线的是样式隔离边界模糊：
-
slot内容的伪类（如button:hover）在 Safari 中可能无法触发父组件的::slotted(button:hover) - 使用
attachShadow({ mode: 'closed' })后，Safari 会彻底屏蔽外部样式穿透，连!important都无效，但开发者工具里却显示样式已计算——这是渲染引擎 bug，不是你没写对 - 如果依赖
part暴露内部节点，确保 Safari 版本 ≥ 15.4，且不要在part名中用大写字母（myPart→my-part）
最稳妥的做法：把需要外部控制的样式，通过 exportparts 显式透出，而不是依赖复杂选择器。
有些兼容逻辑绕不开 polyfill，但更常被忽略的是：Safari 的 Web Components 初始化时机比 Chrome 晚几个微任务，customElements.whenDefined() 的 resolve 时机不稳定，别在它回调里直接操作 shadowRoot —— 先加个 requestAnimationFrame 缓一帧。
