5

当我们使用聚合物或 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 Components – 一个没有框架的人

和元素注册：

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

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

来自2.1的介绍：

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

4

1 回答 1

3

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

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

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

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

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

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

于 2016-03-18T08:54:22.080 回答