Angular 5 - W3C 标记验证答案

【问题标题】：Angular 5 - W3C markup validationAngular 5 - W3C 标记验证
【发布时间】：2018-07-16 06:35:41
【问题描述】：

我正在使用 Angular Universal 构建 Angular 5 应用程序。目前我遇到了 W3C 验证的问题。验证器显示来自 Angular 核心的每个属性的错误。

例如，对于像这样的代码部分：

<span _ngcontent-c1="" class="sr-only">Toggle</span>

我收到如下错误：

此时不允许在元素 span 上使用属性 _ngcontent-c1。

我读到过在 Angular 属性之前添加 data- 前缀，但在 Angular 5 上它不起作用（我认为）。

是否有任何解决方案可以使用 Angular Universal 在服务器端删除它，或者是否有任何外部工具？

【问题讨论】：

npmjs.com/package/angular-html5
您应该阅读说明。我认为它不适用于 Angular 5。Gr
绝对需要这个 W3C 验证吗？
stackoverflow.com/questions/18607437/… 的相关讨论。我们需要就自定义属性名称的一些标准语法达成一致。一些提案已经在github.com/whatwg/html/issues/2271 进行了讨论，但还没有解决方案。如果/当 HTML 规范为自定义属性定义了一些标准语法时，我可以更新 W3C HTML 检查器以识别它们。同时，您可以使用检查器 UI 中的消息过滤功能（按钮）来持久（使用本地存储）过滤掉这些错误
好的，谢谢您的回答。我希望它很快就会可用。

标签： html angular w3c-validation

【解决方案1】：

Angular 提供这些_ngcontent-c1、_ngcontent-c2 属性添加到具有样式的特定DOM 元素。

_ngcontent-c1 从服务器渲染时使用唯一标识。当我们执行 ViewEncapsulation.Emulated 时，这是 angular 的默认行为。

如果您不想要这种属性，可以添加ViewEncapsulation.None 或ViewEncapsulation.Native。

例如。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

【讨论】：