Javascript 为什么角度组件选择器可以包含在html中？

我不熟悉Angular和html/html5，如果我的问题听起来很愚蠢，我很抱歉。下面是一个屏幕截图：

我的问题是：

Q1-

paproductform

是ng组件选择器的名称，它不是有效的html标记，为什么它仍然可以包含在html中？客户端浏览器如何解释这些无效标记

Q2-您可以看到有许多与ng相关的属性，如

\nghost-c0

，html中的自定义属性不是必须是数据xxx（data-\nghost-c0）才能有效吗？

根据

Angular元素是打包为自定义元素（也称为Web组件）的Angular组件，这是一种Web标准，用于以与框架无关的方式定义新的HTML元素

自定义元素是一种Web平台功能，目前由Chrome、Firefox、Opera和Safari支持，并通过polyfills在其他浏览器中提供（请参阅浏览器支持）。自定义元素通过允许您定义由JavaScript代码创建和控制其内容的标记来扩展HTML。浏览器维护定义的自定义元素的CustomElementRegistry，该注册表将可实例化的JavaScript类映射到HTML标记

A1-使用创建自定义HTML元素。

创建自定义元素类后，使用

CustomElementRegistry.define（）

方法定义自定义元素：

class WordCount扩展了HTMLParagraphElement{
构造函数（）{
超级（）；
var wcParent=this.parentNode；//在元素的父元素中计算单词数
函数countWords（节点）{
var text=node.innerText | | node.textContent
返回text.split（/\s+/g）.length；
}
变量计数='Words:'+countWords（wcParent）；
var shadow=this.attachShadow（{mode:'open'}）；//创建一个阴影根
//创建文本节点并向其添加字数
var text=document.createElement（'span'）；
text.textContent=计数；
appendChild（text）；//将其附加到阴影根目录
setInterval（函数（）{//元素内容更改时更新计数
变量计数='Words:'+countWords（wcParent）；
text.textContent=计数；
}, 200)
}
}
//定义新元素
define（'word-count'，WordCount，{extends:'p'}）；

A2-使用创建自定义属性。

在以下示例中，

setAttribute（）

用于设置

上的属性

HTML

你好，世界

JavaScript

var b=document.querySelector（“按钮”）；
b、 setAttribute（“名称”、“helloButton”）；
b、 setAttribute（“已禁用”、“已禁用”）；