Web components – defer page rendering until after customElements.define() has been called to avoid FOUC

by

Summary

The Flash of Unstyled Content (FOUC) problem occurs when using web components defined in ES6 modules, causing a brief flash of unstyled content before the custom element is rendered. This issue arises because modules are loaded with the defer attribute, which delays the execution of the script until the page has finished parsing.

Root Cause

The root cause of the FOUC problem is the delayed execution of the module script, which defines the custom element. The causes of this issue include:

  • Deferred module loading: Modules are loaded with the defer attribute, which delays the execution of the script.
  • Custom element definition: The custom element is defined in a module, which is loaded after the page has finished parsing.
  • Page rendering: The page is rendered before the custom element is defined, causing the FOUC problem.

Why This Happens in Real Systems

This issue occurs in real systems because of the way modules are loaded and executed. When a module is loaded, it is executed after the page has finished parsing, which can cause a delay in the definition of custom elements. This delay can result in the FOUC problem, especially when using web components that rely on custom elements.

Real-World Impact

The FOUC problem can have a significant impact on the user experience, causing a brief flash of unstyled content before the custom element is rendered. The impacts of this issue include:

  • Poor user experience: The FOUC problem can cause a poor user experience, especially if the custom element is critical to the functionality of the page.
  • Visual inconsistencies: The FOUC problem can cause visual inconsistencies, as the page is rendered before the custom element is defined.
  • Performance issues: The FOUC problem can also cause performance issues, as the page may need to be re-rendered after the custom element is defined.

Example or Code

class CustomInput extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    console.log('connectedCallback');
    this.innerHTML = `
      

        
        
      

    `;
  }
}

customElements.define("custom-input", CustomInput);

How Senior Engineers Fix It

Senior engineers can fix the FOUC problem by deferring page rendering until after the custom element has been defined. This can be achieved by using a script loader that loads the module script before the page is rendered. Alternatively, senior engineers can use a module loader that loads the module script before the page is rendered.

Why Juniors Miss It

Junior engineers may miss this issue because they may not fully understand the implications of using modules and custom elements. The reasons why junior engineers may miss this issue include:

  • Lack of experience: Junior engineers may not have experience with using modules and custom elements, which can make it difficult to identify the FOUC problem.
  • Insufficient knowledge: Junior engineers may not have sufficient knowledge of how modules are loaded and executed, which can make it difficult to understand the root cause of the FOUC problem.
  • Inadequate testing: Junior engineers may not thoroughly test their code, which can make it difficult to identify the FOUC problem.