💡hide components until defined

browser ⟩ web components ⟩ hide components

💈範例

/*  make <search-box> invisible before defined */ 
search-box:not(:defined) {

    opacity: 0;
    
    /* try to duplicate its eventual layout and size so that */
    /* nearby content does not move when it becomes defined. */
    display: inline-block; 
    width: 300px; 
    height: 50px;
}

📗 參考

• 📗 JavaScript: The Definitive Guide (15.6 Web Components)

👥 相關

• CSS

• client-side JavaScript timeline - components are not defined until fully loaded.