首页 文章

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

提问于
浏览 次
4

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

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

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

我使用此函数来初始化（mount）组件类实例：

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 . 意思？

Update - W3C规范已更新今日2016年3月18日：

来自2.1 introduction：

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

javascript polymer ecmascript-6 web-component x-tag

1 回答

  • 3

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

    • Provide an abstraction for a blob of html
      您已通过使用标记并手动将blob附加到组件来实现此目的 .

    • Custom lifecycle callbacks
      在 AComponent 类的构造函数中执行的操作可以在createdCallback中移动，并且只要DOM渲染器遇到自定义标记，它就会执行 . 无需亲自致电 mountCustomElement .

    自定义元素为您提供其他实用程序，如

    • attachedCallback 和 detachedCallback ：将组件附加到DOM并从中删除时该怎么办 .
    • attributeChangedCallback ：修改元素上的某个属性时该怎么办 .

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

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

    您的回调不会被触发，您附加到组件原型的任何公共函数都将无法使用 . 基本上你会有一个html标签，浏览器不知道该怎么做 .

    回复于

相关问题