Firefox/edge 中的 HTML 自定义元素答案

【问题标题】：HTML Custom Elements in firefox/edgeFirefox/edge 中的 HTML 自定义元素
【发布时间】：2018-03-27 08:44:35
【问题描述】：

我很清楚 自定义元素 功能可以通过在配置中将 dom.webcomponents.enabled 和 dom.webcomponents.customelements.enabled 设置为 true 来手动启用（至少在 Firefox 中），但是任何人都可以帮助我解释为什么几乎所有文档（w3、mozilla 等）都鼓励使用自定义元素，但似乎只有 Chrome 正确支持此功能。

最近我一直在使用这个 polyfill 来让 customElements 在其他浏览器上工作：

defineElement = function( tag, opt ){
    if( typeof customElements !== 'undefined' ){
        customElements.define( tag, opt );
    } else {
        document.registerElement( tag, opt );
    }
}
class HTMLxSearchElement extends HTMLElement{
    constructor(){
        super();
        console.log('super');
    }
}
defineElement( 'x-search', HTMLxSearchElement )

但现在document.registerElement 功能也被删除了！有没有人有任何替代方法来恢复和运行此功能？

【问题讨论】：

“为什么在几乎所有文档中都鼓励使用自定义元素”——我完全没有这种印象。
您在哪个浏览器和哪个版本上进行测试，document.registerElement 被删除了吗？
@DhruvMurarka 目前在最新的 Firefox Quantum v59.0.1 和 Edge 41.16299.248.0 中进行测试。他们似乎都缺乏这个功能。
@Supersharp 你说得对。我只是注意到有关registerElement 的任何文档中完全缺少他们的信息。它仍然没有解释为什么 Firefox 删除了registerElement 功能并将customElements 设置为新标准，而它必须手动开启。

标签： javascript html custom-element

【解决方案1】：

现在只需使用 polyfill https://github.com/WebReflection/document-register-element 。它与自定义元素 v1 对齐。它适用于 IE10+ 和所有其他浏览器。更多最新资讯请见https://developers.google.com/web/fundamentals/web-components/

【讨论】：

【解决方案2】：

我使用 Angular Elements 创建的 Web 组件在 Edge 浏览器上遇到 customElements not defined 错误，我的解决方案是运行：

npm i -S document-register-element

在我的 Angular Elements 项目 polyfills.ts 文件中，我添加了：

import 'document-register-element'

这解决了我的问题。

【讨论】：

【解决方案3】：

在某些文档中鼓励使用自定义元素 v1，因为它是 HTML/Javascript WHATWG standard。

现在在 Chrome 中是 implemented，在 Opera 和 Safari 中也是。

registerElement 不再适用于 Firefox 59+，因为自定义元素 v0 实现 was deprecated。

【讨论】：

那么什么是健康的替代品呢？ customElements需要用户在FF中启用，我无法想象这是正常情况
@BRO_THOM 你可以使用 polyfill，直到它被默认激活
考虑到鼓励使用它，但默认情况下不启用，并且对于其他浏览器也没有标准化，使用根本不标准的方法似乎是一个糟糕的决定。跨度>
其实是标准化的
你不能调用一个方法标准，如果它没有被默认启用。

【解决方案4】：

Native Custom Elements V1 规范实现在 FireFox 63 版中可用。

所以Chrome、FireFox、Opera 和并行移动版本都支持自定义元素。

Safari 的支持到目前为止还缺少自定义的内置元素。

【讨论】：