Question

当我们使用聚合物或x-tag时，我们必须注册一个新元素。但是，为什么，如果我们可以使用普通的es6 javascript来构建一个没有registerElement的阴影组件。这在最新版本的Chrome，Firefox和Edge中运行良好，没有填充或转换为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 Components – A Man Without a Framework

和Element registration：

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

更新 - W3C规格已于2016年3月18日更新：

来自2.1 introduction：

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

Answer 1

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

为hb blob提供抽象
您已通过使用标记并手动将blob附加到组件来实现此目的。
自定义生命周期回调
在AComponent类的构造函数中执行的操作可以在createdCallback中移动，并且只要DOM渲染器遇到自定义标记，它就会执行。无需亲自致电mountCustomElement。

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

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

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

您的回调不会被解雇，您附加到组件原型的任何公共功能都无法使用。基本上你会有一个html标签，浏览器不知道该怎么做。

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

1 个答案: