Aller au contenu

Web components et JavaScript⚓︎

Chargement des Web Components⚓︎

🐣 2022-08

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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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.

Styler des Web Components⚓︎

🐣 2022-11

Il est possible d’appliquer des styles à un composant web directement avec des variables CSS et Manuel Matuzovic nous le démontre :

web-components-styling.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class Alert extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })

    const styles = document.createElement('style')
    styles.textContent = `
      div {
        background-color: var(--alert-bg, rgb(136 177 255 / 0.5));
        color: var(--alert-color, rgb(0 0 0));
        font-weight: bold;
        padding: var(--alert-spacing, 1rem);
      }
    `

    const content = document.createElement('div')
    content.innerHTML = `
      <slot></slot>
    `

    this.shadowRoot.append(styles)
    this.shadowRoot.append(content)
  }
}

customElements.define('custom-alert', Alert)

On peut ensuite l’utiliser ainsi par défaut :

1
2
3
<custom-alert>
  Votre demande est bien arrivée sur nos serveurs. 😊
</custom-alert>

Et ajouter une classe avec les bons styles — hors du web component — pour un autre type de messages :

1
2
3
<custom-alert class="error">
  Votre demande était un peu trop cavalière ! 🐎
</custom-alert>

1
2
3
4
.error {
  --alert-bg: rgb(255 119 119);
  --alert-spacing: 2rem;
}

Stylé !

Aller plus loin/différemment⚓︎

Dernière mise à jour: 2022-11-06