[英]why Angular component selector can be included in html?
I'm new to Angular and html/html5, sorry if my questions sound dumb.我是 Angular 和 html/html5 的新手,对不起,如果我的问题听起来很愚蠢。 Below is a screenshot:下面是截图:
My questions are:我的问题是:
Q1- paproductform
is ng component selector's name, which is not a valid html tag, how come it can still be included in html?How client browsers interpret those invalid tags? Q1- paproductform
是 ng 组件选择器的名称,它不是有效的 html 标签,为什么它仍然可以包含在 html 中?客户端浏览器如何解释这些无效标签?
Q2- You can see that there are a lots of ng related attributes like _nghost-c0
, isn't that custom attributes in html has to be data-xxx(data-_nghost-c0) to be valid? Q2- 你可以看到有很多 ng 相关的属性,比如_nghost-c0
,html 中的自定义属性不是必须是 data-xxx(data-_nghost-c0) 才有效吗?
According to Angular Documentation:根据Angular 文档:
Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way. Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.
Custom elements are a Web Platform feature currently supported by Chrome, Firefox, Opera, and Safari, and available in other browsers through polyfills (see Browser Support).自定义元素是 Chrome、Firefox、Opera 和 Safari 目前支持的 Web 平台功能,并且可以通过 polyfill 在其他浏览器中使用(请参阅浏览器支持)。 A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code.自定义元素扩展了 HTML,允许您定义其内容由 JavaScript 代码创建和控制的标签。 The browser maintains a CustomElementRegistry of defined custom elements, which maps an instantiable JavaScript class to an HTML tag.浏览器维护已定义自定义元素的CustomElementRegistry ,它将可实例化的 JavaScript class 映射到 HTML 标记。
A1 - Creating custom HTML Elements using CustomElementRegistry . A1 - 使用CustomElementRegistry创建自定义 HTML 元素。
use the CustomElementRegistry.define()
method to define the custom element after creating its class:在创建 class 后,使用CustomElementRegistry.define()
方法定义自定义元素:
class WordCount extends HTMLParagraphElement {
constructor() {
super();
var wcParent = this.parentNode; // count words in element's parent element
function countWords(node){
var text = node.innerText || node.textContent
return text.split(/\s+/g).length;
}
var count = 'Words: ' + countWords(wcParent);
var shadow = this.attachShadow({mode: 'open'}); // Create a shadow root
// Create text node and add word count to it
var text = document.createElement('span');
text.textContent = count;
shadow.appendChild(text); // Append it to the shadow root
setInterval(function() { // Update count when element content changes
var count = 'Words: ' + countWords(wcParent);
text.textContent = count;
}, 200)
}
}
// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });
A2 - Creating custom attribue using Element.setAttribute() . A2 - 使用Element.setAttribute()创建自定义属性。
In the following example, setAttribute()
is used to set attributes on a <button>
.在以下示例中, setAttribute()
用于在<button>
上设置属性。
HTML HTML
<button>Hello World</button>
JavaScript JavaScript
var b = document.querySelector("button");
b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.