Минное поле селекторов
Семь ловушек враждебной разметки для стресс-теста генератора селекторов рекордера. Проблемные элементы здесь сознательно без data-lf-хуков — так выглядит чужой продакшен.
Shadow DOM
Два кастомных элемента рисуют свои контролы внутри shadow-корней — открытого и закрытого, как в Salesforce Lightning.
Iframe
Same-origin-фрейм с формой внутри и рядом — имитация cross-origin.
Same-origin (srcdoc)
Имитация cross-origin
Этот фрейм загружает 127.0.0.1:4321 — относительно localhost:4321 это другой origin, чего достаточно для имитации. Работает только в dev; в проде фрейм просто останется пустым.
Виртуализированный список
1000 логических строк, но в DOM существует только видимое окно — строки пересоздаются при каждом скролле.
Командное меню
Кнопка тулбара открывает портальное меню команд с подменю — пункты существуют, только пока меню открыто, как в ленточных меню.
Hover-меню
Панель добавляется в DOM при наведении и удаляется вскоре после ухода курсора — так ведут себя портальные меню.
Canvas-виджет
Обе «кнопки» — пиксели на canvas: за ними нет ни одного DOM-элемента.
Одинаковые строки
Десять строк, совпадающих байт в байт: одинаковые ячейки, одинаковая кнопка, без id.
| Квартальный отчёт | Финансовый отдел | |
| Квартальный отчёт | Финансовый отдел | |
| Квартальный отчёт | Финансовый отдел | |
| Квартальный отчёт | Финансовый отдел | |
| Квартальный отчёт | Финансовый отдел | |
| Квартальный отчёт | Финансовый отдел | |
| Квартальный отчёт | Финансовый отдел | |
| Квартальный отчёт | Финансовый отдел | |
| Квартальный отчёт | Финансовый отдел | |
| Квартальный отчёт | Финансовый отдел |
Новые вкладки и попапы
Сценарий продолжается в другом контексте браузера: ссылка target=_blank и попап window.open с формой внутри.
В попапе — небольшая форма; её отправка — часть сценария.
Drag & drop (HTML5)
Карточки переносятся между двумя колонками через нативный API dragstart/drop.
Drag & drop (pointer)
Список пересортировывается мышью без DnD API — pointermove и transform, как в dnd-kit.
Текстовый редактор
Поверхность contenteditable с тулбаром форматирования — набор и форматирование живут в одном редактируемом поддереве.
Хэшированные классы и сгенерированные id
Все классы и id этой формы генерируются при сборке и меняются между билдами — в духе CSS-in-JS, Ember и React useId.