浏览器如何解释非标准/自定义 html 标签答案

【问题标题】：how the browser interpret non-standard/custom html tag浏览器如何解释非标准/自定义 html 标签
【发布时间】：2020-03-24 16:56:57
【问题描述】：

我是前端开发的新手。只是关于浏览器如何解释非标准/自定义 html 标记的问题。因为在使用 Angular 时，有一个标签叫做：

<body>
  <app-root ng-version="xxx">
    <div>                        
       ...
       <ul _ngcontent-c0>...</ul>   
    </div>
  </app-root>
</body>

以下是我的问题：

Q1-浏览器如何解释app-root？浏览器解析html文件时应该是错误吗？或者这是否意味着我可以在 html 中添加任何无意义的标签，例如 <NonSense></NonSense>，而浏览器会忽略它？

Q2-当浏览器解析像_ngcontent-c0这样的非标准属性时？浏览器是否会忽略它们，我可以将任何无意义的属性添加到 html 标签中，例如：

<h1 non-sense-attr></h1>

【问题讨论】：

标签： html angular

【解决方案1】：

第一季度。正如您已经猜到的，它不是标准的 HTML 标记。这是一个引用特定组件的自定义选择器标记。它告诉 Angular 我们的组件应该在哪里渲染。一旦我们完成创建它，我们的根组件将在上面包含的标签之间加载它的模板 HTML。

第二季度。 Refer this link，关于ViewEncapsulations的更多解释Refer this

【讨论】：

我知道它是一个选择器，浏览器如何解释这个非标准的html标签

【解决方案2】：

自定义元素

Web Components 是一组 Web 平台 API，允许创建新的自定义、可重用、封装的 HTML 标记以在网页和 Web 应用程序中使用。

Web Components 是一套不同的技术，可让您创建可重用的自定义元素 - 及其功能封装在你的代码的其余部分之外——并将它们用于您的网络应用程序。

Web Components 的功能之一是Custom Elements。使用自定义元素，开发人员（或平台）可以引入非标准 HTML 元素，这些元素将被大多数现代浏览器处理。

自定义属性

您确实可以添加任何自定义属性。浏览器会忽略它们。在 Angular 的上下文中，自定义属性由 view encapsulation and projection 的框架添加。在您的示例中，<ul _ngcontent-c0>...</ul> 可以（由 Angular 自动）在呈现的 CSS 中用于将特定样式应用于特定的 ul 元素，如下所示：

ul[_ngcontent-c0] { ... }

【讨论】：

【解决方案3】：

默认情况下，每个 Angular 项目都会创建 appComponent，它是呈现自定义用户创建组件的基础组件。
这些组件定义了应用程序中的各种 UI 元素。这些 UI 元素以用户定义的名称呈现在 HTML 中。
要识别加载其他组件的基本组件是appComponent，应用程序给出的默认名称是app-root，如下面的组件定义所述，
```
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
```

请阅读角度指南以进一步了解，http://angular.io/

【讨论】：