<dialog>无title属性，标题需用内部元素（如<h3>）配合textContent修改，并通过aria-labelledby关联以保障可访问性。
dialog 标签本身没有 title 属性，不能像 那样直接设 title
HTML 的 <dialog> 元素是语义化容器，不是表单控件，它不支持 title 属性（那个属性只对可聚焦元素起提示作用，且显示为 tooltip）。你看到的“标题”其实是放在 dialog 内部的普通文本节点，比如 <h3> 或 <div class="title">。想改标题，本质是改 DOM 文本内容，不是调某个 API。
用 textContent 或 innerText 更新 dialog 内部标题文本
最常用、最安全的方式是给标题元素加 id 或 class，然后用 JS 修改其文本内容。注意别用 innerHTML 拼接用户输入，防 XSS。
- 确保 dialog 已挂载到 DOM（不能在
document.createElement('dialog')后立刻操作子元素，得先appendChild） - 推荐用
textContent，它不解析 HTML，纯文本替换，性能好又安全 - 如果标题需含简单格式（如
<strong>），且内容完全可信，才考虑innerHTML - 修改后无需手动刷新 dialog，DOM 更新即生效
示例：
<dialog id="confirmDialog"> <h3 id="dialogTitle">确认操作</h3> <p>确定要执行此操作吗？</p> <button data-action="confirm">确定</button> <button data-action="cancel">取消</button> </dialog>
JS 动态改标题：
立即学习“前端免费学习笔记（深入）”；
const dialog = document.getElementById('confirmDialog');
const titleEl = document.getElementById('dialogTitle');
// 打开前动态设标题
function openWithCustomTitle(text) {
titleEl.textContent = text;
dialog.showModal();
}
openWithCustomTitle('删除用户 #789');
用 aria-labelledby 关联标题与 dialog，提升可访问性
仅改文本还不够。屏幕阅读器需要知道这个 <h3> 就是 dialog 的标题。必须用 aria-labelledby 显式关联，否则会被当成普通段落读。
-
<dialog>必须有aria-labelledby属性，值为标题元素的id - 标题元素建议用
<h2>或<h3>，语义清晰 - 不要把多个元素 ID 塞进
aria-labelledby，空格分隔也不推荐——只指一个主标题 - Safari 和旧版 Firefox 对
aria-labelledby支持较弱，但仍是必要基础
正确写法：
<dialog id="confirmDialog" aria-labelledby="dialogTitle"> <h3 id="dialogTitle">确认操作</h3> ... </dialog>
showModal() 不会自动同步标题变化，关闭后状态不保留
每次调用 showModal() 都是重新激活已存在的 dialog 元素，它的 DOM 状态（包括内部文本）是持续的。但如果你在 dialog 关闭后又修改了标题文本，下次打开就会显示新内容——这看似“自动”，其实是 DOM 持久性的结果，不是 dialog 的特性。
- 不要依赖
dialog.open属性判断是否“已打开”，它只反映当前是否处于打开状态，不存历史 - 如果标题需随不同业务场景复用同一 dialog，务必在每次
showModal()前重置文本，避免残留上一次的内容 - 关闭时不会触发任何标题重置逻辑，所有清理工作都得你手动做（比如清空表单、还原按钮文字等）
- 别试图用
setCustomValidity()改标题——那是表单控件的方法，对<dialog>无效，调用会报TypeError
真正容易被忽略的是：dialog 的标题文本和语义关联必须同步更新。改了 textContent 却忘了同步 aria-labelledby 指向，或换了标题元素却没更新 ID，都会让辅助技术失效。这不是“能跑就行”的细节，而是可访问性的硬门槛。
