javascript - firefox/edge 中的 HTML 自定义元素

Question

我很清楚 自定义元素 功能可以通过设置 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 函数也被移除了!有没有人有任何替代方法来恢复和运行此功能？

Answer 1

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