noscript元素内id与外部同id是否会产生冲突？

问题场景示例 #

<noscript>
  <div id="foo">...</div>
</noscript>

<div id="foo">...</div> <!-- 由JavaScript动态添加 -->

规范与工具现状 #

目前HTML规范并未明确界定脚本启用时<noscript>内部内容的DOM身份——有非官方说法称此时它属于纯文本，在Firefox开发者工具中也会显示为原始文本，但不同检测工具的判定结果存在明显分歧：

判定为重复ID错误的工具 #

• Siteimprove
• W3C标记验证工具

未判定为错误的工具 #

• Accessibility Insights for Web
• Axe
• Wave
• ARC

工具分歧的核心在于：部分工具将<noscript>内的内容视为整个文档的固定组成部分（无论脚本是否启用），因此触发ID唯一性校验错误；而另一类工具则认为脚本启用时，<noscript>的内容不会被插入到活跃DOM树中，不存在实际冲突。

结合补充场景：外部div#foo由脚本添加，脚本禁用时该div不存在，因此实际运行时不会出现两个#foo同时存在的情况——冲突仅存在于静态检测阶段，而非实际渲染的DOM中。

建议方案 #

虽然规范没有给出明确结论，但为了规避工具报错，同时避免后续DOM操作中可能出现的意外（比如某些脚本逻辑误触<noscript>内的元素），最稳妥的做法是修改其中一个ID，例如将<noscript>内的元素ID改为foo-noscript。

内容的提问来源于stack exchange，提问作者axlu