WebComponents：Firefox 自定义元素未显示答案

【问题标题】：WebComponents: Firefox custom-element is not showingWebComponents：Firefox 自定义元素未显示
【发布时间】：2019-04-22 13:19:29
【问题描述】：

我正在使用 Web 组件的“自定义元素”功能并且需要支持旧浏览器（Firefox v60），因此不要通过加载所有 polyfill 的 webcomponent-loader.js 加载 polyfill。基于特征检测的惰性加载自定义elementpolyfill

(function() {
if(!window.customElements){
var ce = document.createElement('script');
ce.type = 'text/javascript';
ce.async = true;
ce.src = 'https://unpkg.com/@webcomponents/custom-elements@1.2.4/custom-elements.min.js';
/**

     * loading "customElement" polyfills wont't fire "WebComponentsReady" event, it will be called when we use
     * "webcomponent-loader.js" but it will load other polyfills("shadow-dom"), so loading the "customElements" polyfill alone
     * based on feature detection and firing "WebComponentsReady" event manually.
     */
  ce.onload = function() {
      document.dispatchEvent(
          new CustomEvent('WebComponentsReady', {bubbles: true}));
  };
  var st = document.getElementsByTagName('script')[0];
  st.parentNode.insertBefore(ce, st);
}
})()

并在加载时手动触发WebComponentsReady 事件。像下面这样注册元素

let registerElement = () => {
 if(!window.customElements.get(“wc-button")){
   window.customElements.define(‘wc-button', WCButton);
 }
};

if(window.customElements){
  registerElement();
 } else {
  document.addEventListener('WebComponentsReady', registerElement);
}

WebComponentsReadygot 已触发，并且已在侦听器回调中调用以定义/注册元素，但该元素未在 firefox60.6.1esr（64 位）的页面中显示或加载

【问题讨论】：

标签： javascript firefox web-component custom-element

【解决方案1】：

webcomponents-loader.js 为您进行特征检测而不是等待 WebComponentsReady 事件，你这样做

<script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script>
window.WebComponents.waitFor(() => {
   // do stuff that needs the polyfill
})
</script>

更多信息：

【讨论】：

1. 当window.WebComponents.waitFor 行在webcomponents-loader 脚本加载之前执行时，此行将中断。 2. webcomponents-loader 加载所有的 polyfill，如自定义元素、shadow-dom、shady-css，在我的用例中，我只需要自定义元素。所以使用加载器会加载冗余资源(shadow-dom, shadycss)
webcomponents-loader.js 应该在其他脚本之前同步加载。它只会加载需要的 polyfill。所以在现代浏览器上，它基本上只是调用 waitFor 回调，但对于旧版浏览器，它使用特征检测来决定加载哪些 polyfill。

【解决方案2】：

HTMLElement 只能在实现自定义元素时进行扩展（使用 polyfill 原生支持）。

因此，您必须仅在加载 polyfill 后定义 <wc-button> 自定义元素类。

在你的例子中：

let registerElement = () => {
    if(!window.customElements.get("wc-button")){
         //define the WCButton class here
         class WCButton extends HTMLElement {
             //...
         }
         window.customElements.define(‘wc-button', WCButton);
    }
};

【讨论】：