Intégrer un WebComponent existant

Qu'est qu'un Web Component ?

Les Web Components sont un ensemble de technologies web qui permettent de créer des éléments HTML personnalisés qui peuvent être réutilisés dans différentes pages ou applications web.

Un Web Component est constitué de plusieurs parties :

• Une définition de l'élément (HTML)
• Un script JavaScript qui définit le comportement de l'élément
• Un styles CSS qui définit l'apparence de l'élément

Les Web Components sont créés en utilisant des technologies web standard telles que HTML, CSS et JavaScript, ce qui les rend compatibles avec la plupart des navigateurs modernes. Les Web Components permettent de créer des éléments personnalisés qui peuvent être utilisés comme des éléments HTML standard (par exemple, <mon-composant></mon-composant>) dans n'importe quelle page ou application web, indépendamment de la technologie utilisée pour construire cette page ou cette application.

Voici un exemple possible de la structure des dossiers pour un projet Angular qui utilise un Web Component créé en dehors d'Angular

my-project/
|- src/
   |- app/
      |- app.component.ts
      |- web-components/
         |- my-component.ts
|- index.html
|- ... (autres fichiers)

Un Web Component

// src/app/web-components/my-component.ts
class MyComponent extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `<h1>Un test!</h1>`;
    }
}

customElements.define('my-component', MyComponent);

L'écriture d'un WebComponent

1. La définition d'un nouveau type d'élément personnalisé en utilisant la classe MyComponent qui étend la classe HTMLElement de JavaScript natif :

class MyComponent extends HTMLElement

Cela signifie que la classe MyComponent hérite des propriétés et des méthodes de la classe HTMLElement, ce qui lui permet de comporter comme un élément HTML standard.

2. La définition d'une méthode connectedCallback qui est appelée lorsque l'élément est ajouté à un document :

connectedCallback() {
    this.innerHTML = `<h1>Un test!</h1>`;
}

4. L'enregistrement de l'élément personnalisé avec customElements.define() :

customElements.define('my-component', MyComponent);

La fonction customElements.define() est utilisée pour enregistrer l'élément personnalisé avec un nom d'élément spécifié (my-component) et une classe (MyComponent) qui définit son comportement. Cela permet à l'élément d'être utilisé comme un élément HTML standard dans n'importe quelle page ou application web

Pour utiliser un Web Component créé en dehors d'Angular dans un composant Angular, vous devrez inclure cet élément dans votre template HTML de la même manière que vous utiliseriez n'importe quel autre élément HTML standard.

Voici un exemple de comment utiliser le Web Component MyComponent dans un composant Angular :

// src/app/app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import './web-components/my-component';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<my-component></my-component>`
})
export class AppComponent {}

Bien comprendre CUSTOM_ELEMENTS_SCHEMA

L'une des propriétés est schemas. Les schémas de validation de template permettent à Angular de vérifier la syntaxe et la structure des templates de composants pour s'assurer qu'ils sont valides.

Il existe deux types de schémas de validation de template dans Angular :

• NO_ERRORS_SCHEMA : désactive la validation de schéma pour les composants. Cela signifie qu'Angular ne vérifiera pas la syntaxe et la structure des templates de composants pour s'assurer qu'ils sont valides.
• CUSTOM_ELEMENTS_SCHEMA : permet l'utilisation d'éléments personnalisés dans les templates de composants. Angular reconnaitra ces éléments comme valides, même s'il ne les connait pas.