仅能静态显示内容，无法实现模态交互，真可用须补足遮罩、焦点控制等原生能力；无js时唯一可行场景是让用户看见提示，需满足dom位置、语义标签、内联样式等硬性条件。
<dialog></dialog> 在无 JS 环境下只能靠 open 属性静态显示，但不模态、无遮罩、无焦点控制——这不是“降级”，而是“仅可见”。真要可用，必须配合 HTML 原生能力补足关键缺口。
为什么 open 属性不能当“默认弹窗”用
写了 <dialog open></dialog>，页面一加载就看到内容，但用户会立刻遇到这些问题：
- 按 Esc 键毫无反应（
close事件不触发） - 点击对话框外区域，背景仍可滚动、可点击，Tab 键能穿出到 body
- 屏幕阅读器可能忽略
role="dialog"，因为缺少aria-modal="true"和焦点锁定 - iOS Safari 16.3 及更早版本直接当普通
<div> 渲染，既不居中也不限制缩放 <li>DOM 挂载后设 <code>dialog.open = false不生效，也不会移除遮罩（本来就没有） - 放在
直接子级，不嵌套在<div> 或框架组件内（否则 Chrome/Firefox 解析器直接忽略） <li>内部必须含可操作内容：比如一个 <code><form method="get" action="/agree"></form>，而不是空<p></p> - 加
role="dialog"和aria-labelledby，让辅助技术至少知道这是对话框语义 - 用
<style></style>内联写基础样式：dialog[open] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }，避免依赖外部 CSS - 所有链接、图片用绝对路径或 data URI，相对路径在无 JS 时可能解析失败
- 直接在
<script></script>里调dialog.showModal()→ 报错Cannot read property 'showModal' of null（DOM 没挂载完） - 用
window.addEventListener('DOMContentLoaded', ...)→ 安全，但需确保<dialog></dialog>已存在于 HTML 中（不能靠 JS 动态插入） - 检测兼容性：
if ('showModal' in HTMLDialogElement.prototype)，否则 fallback 到dialog.hidden = false; dialog.setAttribute('aria-modal', 'true') - 打开后必须手动
dialog.querySelector('button, input')?.focus()，否则键盘用户卡在页面顶部 - 关闭后记得把焦点还给触发按钮，否则 Tab 流断裂
-
:target伪类 + URL 哈希：@#@#@#@#@#@#@#@#@#@0<dialog id="notice">...</dialog>，缺点是改变地址栏 -
<details><summary></summary></details>：适合非模态展开说明，不阻断背景，但语义清晰、无需 JS、全浏览器支持 - Checkbox hack：
<input type="checkbox" id="modal-toggle"><label for="modal-toggle">打开</label><div class="modal">...</div>，用input:checked ~ .modal控制显隐，结构稍重但完全可控 - 纯 CSS
:hover或:focus-within：只适用于悬浮提示、下拉菜单等弱模态场景，不推荐用于关键操作确认
纯静态场景下唯一可行的 <dialog open></dialog> 写法
如果你的目标是「禁用 JS 时至少让用户看见一段提示」，而非「提供可交互弹窗」，那 <dialog open></dialog> 是唯一选择。但必须满足：
真正想“一进页面就弹出可用弹窗”，JS 是硬门槛
无 JS 下无法实现带遮罩、锁焦点、支持 Esc 的模态行为。但 JS 初始化时机极易出错：
比 <dialog></dialog> 更稳的无 JS 替代方案
如果目标是轻量提示、公告或表单确认，且必须零 JS 可用，优先考虑这些原生组合：
最常被忽略的一点：无论选哪种方案，<dialog></dialog> 的降级不是“加个 noscript 就完事”，而是整个交互流程必须从 HTML 原生能力出发设计——比如表单提交走 action，而不是全靠 fetch()；导航用真实 <a href></a>，而不是 router.push()。否则，open 属性只是让你更快地暴露白屏问题。
