为什么我们要注册自定义元素

Question

当我们使用聚合物或 x-tag 时，我们必须注册一个新元素。但是为什么，如果我们可以使用普通的 es6 javascript 来构建一个没有 registerElement 的阴暗组件。这在最新版本的 Chrome、Firefox 和 Edge 中运行良好，无需使用 polyfill 或转译为 es5。

<a-custom-element id="aid"></a-custom-element>

<template id="a-custom-element">  
    ....  // html
</template>

我使用这个函数来初始化（挂载）组件类实例：

function mountCustomElement(custom_tag, custom_class) {
    Array.from(document.querySelectorAll(custom_tag)).forEach((element) => {
            new custom_class(element, custom_tag);
    });
}
document.addEventListener("DOMContentLoaded", function () {
    ....
    mountCustomElement('a-custom-element', AComponent);
    ....
}); 

组件类：

class AComponent {             // without the extend HTMLElement !!
    constructor(custom_element, template_id) {

        this.id = custom_element.id;
        let content = document.querySelector(`#${template_id}`).content;
        // for easy inspection
        AComponent.hasOwnProperty('instances') ?Acomponent.instances.push(this) :AComponent.instances = [this];

        ....
        let $root = document.querySelector(`#${this.id}`);
        $root.appendChild(document.importNode(content, true));
        ....
    }

另见：ES6 Web 组件——一个没有框架的人

和元素注册：

在您可以使用自定义元素之前，需要先注册它。否则，浏览器会将其视为 HTMLElement。意义 ？

更新- W3C 规范于 2016 年 3 月 18 日今天更新：

从2.1 介绍：

自定义元素为作者提供了一种构建他们自己的全功能 DOM 元素的方法。尽管作者总是可以在他们的文档中使用非标准的标签名称，并在事后通过脚本或类似方式添加特定于应用程序的行为，但这些元素历来不符合标准且功能不强。通过定义自定义元素，作者可以通知解析器如何正确构造元素以及该类的元素应如何对更改做出反应。

Answer 1

自定义元素提供以下功能：

1. 为 html blob 提供抽象
   您已经通过使用标签并将 blob 手动附加到组件来实现这一点。
2. 自定义生命周期回调
   类 的构造函数中所做的事情AComponent可以移动到createdCallback中，并且每当DOM渲染器遇到您的自定义标记时就会执行它。没必要给mountCustomElement自己打电话。

自定义元素为您提供其他实用程序，例如
-attachedCallback和detachedCallback：当您的组件附加到 DOM 并从中删除时该怎么做。
- attributeChangedCallback：当元素的某个属性被修改时该怎么做。

理想情况下，所有这些事情都可以使用mutationObservers等来完成。但是自定义元素为您提供了一个包，该包使用简单的回调对所有元素进行本机支持，否则很难实现。

在使用自定义元素之前，需要先注册它。否则，浏览器将其视为 HTMLElement。意义 ？

您的回调不会被触发，您附加到组件原型的任何公共函数都将不可用。本质上，您将拥有一个浏览器不知道该怎么做的 html 标记。