Проверка совместимости Web Components в браузерах

Web Components объединяют custom elements, Shadow DOM, templates и slots. Проверка должна охватывать жизненный цикл, композицию, стили, формы, фокус и видимый результат, а не только наличие customElements. Используйте спецификацию WHATWG и MDN как границы утверждений.

Контракт и fixture

Запишите тег, атрибуты, свойства, события, слоты, состояния, значение формы и клавиатуру. Сравнивайте принятую и новую версию при одинаковых пакете, профиле, платформе, окне, языке, разрешениях и данных. Дайте нативный HTML запасной вариант, сохраните введённые значения и очищайте слушатели, таймеры и узлы при любой ошибке. Проверьте обновление, повторные обратные вызовы, двойную регистрацию, пустые и именованные слоты, событие изменения слота, стили, составные события, данные формы, отключение, сброс, проверку, имя, порядок клавиатуры и выход.

async function runFixture() {
  const host = document.createElement('div');
  host.innerHTML =
    '<form><label>Проект <input name="project" value="alpha"></label><web-status><span slot="label">Готово</span></web-status><button>Продолжить</button></form><p id="status" role="status"></p><button id="fallback" hidden>Обычная форма</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 = 'Обычная форма';
      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 = 'Отправлено';
    return 'supported';
  } catch (e) {
    fallback.hidden = false;
    status.textContent = 'Обычная форма';
    return 'application';
  } finally {
    host.remove();
  }
}

Таблица решения

Компонент и версия; browser/profile/platform; fixture и contract; registration/Shadow DOM;
form value; keyboard/name/focus/status; application result and fallback;
first good/first bad; owner, next action, rollback expiry.

Наблюдение	Класс	Действие
Все проверки проходят	Поддержано	Включить candidate и сохранить evidence
API есть, contract нарушен	Приложение	Исправить компонент
Меняется только после update при фиксированных входах	Кандидат-регрессия	Повторить, назначить owner, временно откатить
Падает один профиль, политика или платформа	Среда	Исправить среду и повторить
Результат чередуется	Intermittent	Сохранить failures и исследовать timing
Переменные неполны	Неизвестно	Приостановить решение

BotBrowser позволяет проверять разрешённый Web Components fixture в управляемом контексте и сравнивать регистрацию, рендеринг и видимое взаимодействие. BotBrowser не гарантирует стандарты, доступность, качество компонента или соответствие production. См. документацию, сохраняйте запасной вариант и назначайте владельца.

Регистрация и жизненный цикл

Проверьте однократную регистрацию, upgrade, динамическую вставку, удаление, повторную вставку и очистку после навигации. Отделяйте ошибку регистрации от ошибки приложения или зависимости.

Рендеринг и доступность

Проверьте доступное имя, роль, состояние, фокус, клавиатуру, масштаб, длинный текст и сообщения об ошибках. Для формы проверьте значение, disabled, reset, validation и отправку.

Матрица версий

Зафиксируйте bundle, профиль, платформу, viewport, язык, разрешения и синтетические данные для каждой версии. Запишите первое изменившееся утверждение и сохраните последнюю принятую версию для отката.

Передача решения

Укажите версию компонента, ревизию fixture, браузер, видимые проверки, идентификатор доказательства, владельца и условие остановки. См. также совместимость API и запасные ветви и триаж после обновления.

Проверить границы

Используйте только разрешённые пути и отмечайте непроверенные браузеры и зависимости как выходящие за рамки.

Журнал запуска:

Зафиксируйте принятый контракт до расширения матрицы.

Повторите регистрацию после навигации.

Сравнивайте доступное имя и фокус, а не только пиксели.

Сохраняйте принятую версию для отката.

Записывайте первое изменившееся утверждение.

Разделяйте ошибки компонента и среды.

Используйте синтетические данные для форм.

Результат без контролируемого состояния отмечайте как неизвестный.

Проверяйте длинные переводы и сообщения об ошибках.

Назначайте владельца каждому неопределённому результату.

Используйте одинаковый текст проверки в каждой строке матрицы и запишите версию компонента, браузер и идентификатор запуска.

Итоговое доказательство

Сохраняйте утверждение, браузер и идентификатор каждого запуска.

Решение должно указывать границы, владельца и дату следующего обзора.

Источники

• WHATWG custom elements
• MDN Web Components
• BotBrowser