WebComponents：Firefox自定義元素未顯示

Question

我正在使用Web組件的“自定義元素”功能，並且需要支持舊的瀏覽器（Firefox v60），因此與其通過webcomponent-loader.js加載所有polyfill來加載polyfill。 基於特征檢測的延遲加載的custom-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位）的頁面中顯示或加載。

Answer 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>

欲獲得更多信息：

Answer 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);
    }
};