logo标签列表

浏览器如何解释非标准/自定义HTML标签

htmlangular
3

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

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

以下是我的问题：
Q1-浏览器如何解释`app-root`？当浏览器解析html文件时，这是否应该是一个错误？或者这意味着我可以在html中添加任何无意义的标签，例如``，而浏览器则会忽略它？
Q2-当浏览器解析非标准属性，如`_ngcontent-c0`时，浏览器会忽略它们吗？我可以向html标记添加任何无意义的属性吗？
<h1 non-sense-attr></h1>
3个回答
1

问题1：正如你所猜测的那样，<app-root>不是标准的HTML标签。这是一个自定义选择器标签，用于引用特定的组件。它告诉Angular应该在哪里呈现我们的组件。一旦我们完成创建，我们的根组件将在上面包含的<app-root>标签之间加载其模板HTML。

问题2：参考此链接，了解有关ViewEncapsulations的更多解释请参阅此处

1
我知道这是一个选择器，但浏览器如何解释这个非标准的HTML标签？ - user11680003
0

自定义元素

Web组件是一组Web平台API，允许创建新的自定义、可重用、封装的HTML标签，并在Web页面和Web应用程序中使用它们。

Web组件是一套不同技术的集合，允许您创建可重用的自定义元素——其功能封装在代码的其余部分之外——并在您的Web应用程序中利用它们。

Web组件的一个特性是自定义元素。使用自定义元素，开发人员（或平台）可以引入非标准的HTML元素，这些元素将由大多数现代浏览器处理。

自定义属性

你确实可以添加任何自定义属性。浏览器会忽略它们。在 Angular 上下文中，自定义属性是由框架用于 view encapsulation and projection 添加的。在你的例子中，<ul _ngcontent-c0>...</ul> 可以被使用（由 Angular 自动）在渲染的 CSS 中，为该特定的 ul 元素应用特定的样式，就像这样：

ul[_ngcontent-c0] { ... }
0
  • 每个Angular项目默认都会创建一个appComponent，这是渲染自定义用户创建组件的基础组件。
  • 这些组件定义了应用程序中的各种UI元素。这些UI元素以用户定义的名称呈现在HTML中。

  • 为了识别加载其他组件的基础组件appComponent，应用程序给出的默认名称是app-root，如下所示的组件定义所解释的：

     @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
请仔细阅读 Angular 指南以进一步了解，http://angular.io/。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接