Aller au contenu

Web components et JavaScript⚓︎

Chargement des Web Components⚓︎

Les Web Components étant chargés en JavaScript, il y a un moment où il peut y avoir un flash lors du chargement. Cette astuce proposée par Cory LaViska permet de donner une impression de chargement synchrone à la page.

Plutôt que de le faire en CSS :

1
2
3
:not(:defined) {
  visibility: hidden;
}

On va le faire en JavaScript (combiné à du CSS) :

web-components-loading.html
<style>
  body {
    opacity: 0;
  }

  body.ready {
    opacity: 1;
    transition: 0.25s opacity;
  }
</style>

<script type="module">
  await Promise.allSettled([
    customElements.whenDefined('my-button'),
    customElements.whenDefined('my-card'),
    customElements.whenDefined('my-rating'),
  ])

  // Button, card, and rating are registered now! Add
  // the `ready` class so the UI fades in.
  document.body.classList.add('ready')
</script>

On attend que chacun des composants soit chargé pour afficher le <body> avec une transition sur l’opacité. Selon la portée de vos composants, il n’est pas forcément nécessaire d’appliquer cela à la page entière mais ça donne des idées.

Aller plus loin/différemment⚓︎


Dernière mise à jour: 2022-08-21