Angular 12 Universal SSR自定义选择器未通过W3 HTML验证求助

报错根因 #

W3 HTML验证报错的核心原因是你使用的自定义元素名称不符合HTML规范要求：HTML标准明确规定，所有自定义元素的名称必须包含至少一个短横线（-），用于和原生HTML元素做区分，避免和后续新增的原生元素命名冲突。你用的<app>、<project>都是无短横线的单单词名称，天然不符合规范，和Angular SSR本身没有直接关联，只是SSR会直接输出包含该标签的完整HTML内容，所以会被验证工具直接识别到问题。

可行解决方案 #

方案1：调整组件selector为符合规范的命名（最推荐）

这是Angular官方推荐的最佳实践，脚手架默认生成的AppComponent默认selector就是app-root，本身就符合规范：

1. 修改组件的selector配置：

@Component({
  selector: 'app-root', // 改为带短横线的多段命名
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None
})

2. 同步修改index.html中的挂载标签：

<body>
  <app-root id="app"></app-root>
</body>

方案2：使用属性/类选择器挂载组件（无需调整原有命名逻辑）

如果你不想改动现有组件的命名规则，可以切换为属性选择器绑定组件，使用原生HTML元素作为挂载容器，完全规避自定义元素的规范问题：

1. 修改组件的selector为属性选择器格式：

@Component({
  selector: '[app]', // 加中括号改为属性选择器
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None
})

2. 同步修改index.html，给原生div添加对应属性作为挂载点：

<body>
  <div id="app" app></div>
</body>

以上两种方案修改后重新构建SSR项目，即可通过W3 HTML验证。

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