Campo minado de selectores
Siete trampas de marcado hostil para poner a prueba el generador de selectores del grabador. A propósito, los elementos problemáticos no llevan ganchos data-lf: así luce la producción ajena.
Shadow DOM
Dos elementos personalizados dibujan sus controles dentro de raíces shadow — una abierta y otra cerrada, al estilo de Salesforce Lightning.
Iframes
Un marco same-origin con un formulario dentro y, al lado, una imitación cross-origin.
Same-origin (srcdoc)
Imitación cross-origin
Este marco carga 127.0.0.1:4321: respecto a localhost:4321 es otro origin, suficiente para la imitación. Solo funciona en dev; en producción el marco queda vacío.
Lista virtualizada
1000 filas lógicas, pero en el DOM solo existe la ventana visible: las filas se recrean con cada desplazamiento.
Menú de comandos
Un botón de la barra abre un menú de comandos portalizado con submenú — los elementos solo existen mientras el menú está abierto, como en los menús de cinta.
Menú hover
El panel se inserta en el DOM al pasar el cursor y se elimina poco después de salir: así se comportan los menús con portal.
Widget canvas
Los dos «botones» son píxeles sobre un canvas: detrás no hay ningún elemento del DOM.
Filas idénticas
Diez filas que coinciden byte a byte: mismas celdas, mismo botón, sin ids.
| Informe trimestral | Equipo financiero | |
| Informe trimestral | Equipo financiero | |
| Informe trimestral | Equipo financiero | |
| Informe trimestral | Equipo financiero | |
| Informe trimestral | Equipo financiero | |
| Informe trimestral | Equipo financiero | |
| Informe trimestral | Equipo financiero | |
| Informe trimestral | Equipo financiero | |
| Informe trimestral | Equipo financiero | |
| Informe trimestral | Equipo financiero |
Pestañas nuevas y popups
El escenario continúa en otro contexto del navegador: un enlace target=_blank y un popup window.open con un formulario dentro.
El popup contiene un formulario pequeño — enviarlo es parte del escenario.
Arrastrar y soltar (HTML5)
Las tarjetas se mueven entre dos columnas mediante la API nativa dragstart/drop.
Arrastrar y soltar (pointer)
La lista se reordena con el ratón sin la API de DnD — pointermove y transforms, como dnd-kit.
Editor de texto enriquecido
Una superficie contenteditable con barra de formato — escribir y formatear viven en un mismo subárbol editable.
Clases con hash e ids generados
Cada clase e id de este formulario se genera en la compilación y cambia entre builds: al estilo CSS-in-JS, Ember y React useId.