我已將自定義輸入元素(表單的新式文本輸入)設(shè)置為 Web 組件。我為實(shí)現(xiàn)它而制作的.js文件有三個部分。模板:const textInputTemplate = document.createElement('text-input-template');textInputTemplate.innerHTML =`<div class="text-input-container"> <!--Irrelevant--></div>`;元素的類聲明:class textInput extends HTMLElement { static get observedAttributes() { return ['readonly']; } constructor () { super(); // Shadow root } // End of constructor() connectedCallback () { // Custom attributes } // End of connectedCallback() disconnectedCallback () { // Remove event listeners } // End of disconnectedCallback() attributeChangedCallback(attribute, oldValue, newValue) { // Updatable attributes: readonly } // End of attributeChangedCallback() }最后,將自定義元素與標(biāo)記名稱關(guān)聯(lián)的方法:window.customElements.define('text-input', textInput);問題:我擔(dān)心使用效率低下或可能導(dǎo)致錯誤,因?yàn)樗陧撁娴钠溆嗖糠旨虞d后同步加載。因此,我想知道是否有一種更清晰/更專業(yè)的方法來異步導(dǎo)入Web組件,而無需將整個模塊粘貼到這樣的函數(shù)中:<script src="./module-name">export function textInput { // insert entire modules contents here }因?yàn)槲倚枰K的所有三個部分才能使 Web 組件正常工作,所以我不能只導(dǎo)出 Web 組件類。
如何異步導(dǎo)入自定義 Web 組件?
溫溫醬
2022-08-04 15:57:12