Champ de mines des sélecteurs
Sept pièges de balisage hostile pour éprouver le générateur de sélecteurs de l'enregistreur. À dessein, les éléments à problème ne portent aucun crochet data-lf : voilà à quoi ressemble la production d'autrui.
Shadow DOM
Deux éléments personnalisés rendent leurs contrôles dans des racines shadow — l'une ouverte, l'autre fermée, à la manière de Salesforce Lightning.
Iframes
Un cadre same-origin avec un formulaire à l'intérieur et, à côté, une imitation cross-origin.
Same-origin (srcdoc)
Imitation cross-origin
Ce cadre charge 127.0.0.1:4321 : par rapport à localhost:4321, c'est un autre origin, ce qui suffit pour l'imitation. Cela ne fonctionne qu'en dev ; en production, le cadre reste simplement vide.
Liste virtualisée
1000 lignes logiques, mais seule la fenêtre visible existe dans le DOM : les lignes sont recréées à chaque défilement.
Menu de commandes
Un bouton de la barre ouvre un menu de commandes portalisé avec sous-menu — les éléments n'existent que tant que le menu est ouvert, comme dans les menus ruban.
Menu au survol
Le panneau est inséré dans le DOM au survol et retiré peu après le départ du curseur : le comportement des menus à portail.
Widget canvas
Les deux « boutons » ne sont que des pixels sur un canvas : aucun élément du DOM derrière.
Lignes identiques
Dix lignes identiques octet pour octet : mêmes cellules, même bouton, aucun id.
| Rapport trimestriel | Équipe finance | |
| Rapport trimestriel | Équipe finance | |
| Rapport trimestriel | Équipe finance | |
| Rapport trimestriel | Équipe finance | |
| Rapport trimestriel | Équipe finance | |
| Rapport trimestriel | Équipe finance | |
| Rapport trimestriel | Équipe finance | |
| Rapport trimestriel | Équipe finance | |
| Rapport trimestriel | Équipe finance | |
| Rapport trimestriel | Équipe finance |
Nouveaux onglets et popups
Le scénario continue dans un autre contexte du navigateur : un lien target=_blank et un popup window.open avec un formulaire.
Le popup contient un petit formulaire — l'envoyer fait partie du scénario.
Glisser-déposer (HTML5)
Les cartes passent d'une colonne à l'autre via l'API native dragstart/drop.
Glisser-déposer (pointer)
La liste se réordonne à la souris sans l'API DnD — pointermove et transforms, comme dnd-kit.
Éditeur de texte riche
Une surface contenteditable avec barre de mise en forme — la saisie et la mise en forme vivent dans un même sous-arbre éditable.
Classes hachées et ids générés
Chaque classe et id de ce formulaire est généré au build et change d'un build à l'autre : façon CSS-in-JS, Ember et React useId.