Revue de compatibilité navigateur pour les Web Components

Les Web Components réunissent custom elements, Shadow DOM, templates et slots. Une revue sérieuse vérifie le cycle de vie, la composition, les styles, les formulaires, le focus et le résultat visible, pas seulement customElements. Utilisez la spécification WHATWG et MDN pour définir les observations.

Contrat et fixture

Décrivez balise, attributs, propriétés, événements, emplacements, états, valeur de formulaire et clavier. Gardez paquet, profil, plateforme, fenêtre, langue, permissions et données identiques entre version bonne et candidate. Ajoutez un secours HTML natif, préservez les valeurs saisies et supprimez les écouteurs, minuteries et nœuds dans chaque branche.

async function runFixture() {
  const host = document.createElement('div');
  host.innerHTML =
    '<form><label>Projet <input name="project" value="alpha"></label><web-status><span slot="label">Prêt</span></web-status><button>Continuer</button></form><p id="status" role="status"></p><button id="fallback" hidden>Utiliser le formulaire standard</button>';
  document.body.append(host);
  const status = host.querySelector('#status');
  const fallback = host.querySelector('#fallback');
  try {
    if (!('customElements' in window) || !('attachShadow' in Element.prototype)) {
      fallback.hidden = false;
      status.textContent = 'Utiliser le formulaire standard';
      return 'blocked';
    }
    class WebStatus extends HTMLElement {
      connectedCallback() {
        const root = this.attachShadow({ mode: 'open' });
        root.innerHTML = '<span><slot name="label"></slot></span>';
      }
    }
    if (!customElements.get('web-status')) customElements.define('web-status', WebStatus);
    await customElements.whenDefined('web-status');
    status.textContent = new FormData(host.querySelector('form')).get('project') ? 'Envoyé' : 'Projet manquant';
    return 'supported';
  } catch (e) {
    fallback.hidden = false;
    status.textContent = 'Utiliser le formulaire standard';
    return 'application';
  } finally {
    host.remove();
  }
}

Testez upgrade, callbacks répétés, double enregistrement, slots vides et répétés, slotchange, styles hérités, zoom, forced colors et événements composés. Vérifiez FormData, disabled, reset, validation, nom accessible, ordre de tabulation, Escape et retour du focus. Un résultat visuel ne prouve pas la réussite métier.

Worksheet et table de décision

Composant/balise; révision et responsable; build/profil/plateforme; fixture;
contrat (attributs, propriétés, événements, slots); enregistrement et Shadow DOM;
formulaire; clavier, nom, focus, statut; résultat et fallback;
première version bonne/mauvaise; propriétaire, action et expiration du rollback.

Observation	Classe	Action
Tous les contrôles passent	Supporté	Inclure la candidate et conserver la preuve
API présente, contrat échoué	Application	Corriger le composant
Échec seulement après mise à jour à variables fixes	Régression candidate	Rejouer, assigner, rollback temporaire
Échec d’un profil/politique/OS	Environnement	Corriger puis rejouer
Résultat variable	Intermittent	Conserver les échecs et investiguer
Preuve ou variables incomplètes	Inconnu	Suspendre la décision

BotBrowser peut tester un fixture Web Components autorisé dans des contextes contrôlés et comparer l’enregistrement, le rendu et l’interaction visibles. BotBrowser ne peut pas certifier la conformité, l’accessibilité, la qualité ou la parité de production. Documentez cette limite avec sa documentation et gardez la solution de repli jusqu’à validation.

Enregistrement et cycle de vie

Vérifiez l’enregistrement unique, l’upgrade, l’insertion dynamique, la suppression, la réinsertion et le nettoyage après navigation. Séparez un échec d’enregistrement d’un problème applicatif ou de dépendance.

Rendu et accessibilité

Contrôlez nom accessible, rôle, état, focus, clavier, zoom, textes longs et messages d’erreur. Pour un formulaire, vérifiez valeur, désactivation, reset, validation et soumission.

Matrice de versions

Fixez bundle, profil, plateforme, viewport, langue, permissions et données synthétiques pour chaque version. Notez la première assertion qui change et gardez la dernière version acceptée pour le retour arrière.

Transmission de la décision

Indiquez version du composant, révision du fixture, navigateur, assertions visibles, identifiant de preuve, responsable et condition d’arrêt. Consultez aussi compatibilité des API et solutions de repli et triage après mise à jour.

Vérifier les limites

Exécutez seulement des parcours autorisés et marquez comme hors périmètre tout navigateur ou dépendance non testé.

Journal d’exécution :

Fixez le contrat approuvé avant d’élargir la matrice.

Rejouez l’enregistrement après une navigation.

Comparez nom accessible et focus, pas seulement les pixels.

Gardez la version acceptée pour le retour arrière.

Notez la première assertion qui change.

Séparez les erreurs du composant et de l’environnement.

Utilisez des données synthétiques pour les formulaires.

Marquez inconnu tout résultat sans état contrôlé.

Revoyez les traductions longues et les messages d’erreur.

Nommez un responsable pour chaque résultat incertain.

Conservez la même formulation d’assertion dans chaque ligne de la matrice et notez la version du composant, le navigateur et l’identifiant d’exécution.

Preuve finale

Conservez l’assertion, le navigateur et l’identifiant de chaque exécution.

La décision doit indiquer le périmètre, le responsable et la prochaine revue.

Sources

• WHATWG custom elements
• MDN Web Components
• BotBrowser