Revisión de compatibilidad del navegador para Web Components

Los Web Components combinan custom elements, Shadow DOM, templates y slots. Una revisión útil no se limita a comprobar si existe customElements: también verifica ciclo de vida, composición, estilos, formularios, foco y resultado visible. Use el estándar WHATWG y la guía MDN como límites de la evidencia.

Contrato y fixture controlado

Documente etiqueta, atributos, propiedades, eventos, slots, estados, valor de formulario y comportamiento de teclado. Mantenga el mismo paquete, perfil, plataforma, viewport, idioma, permisos y datos al comparar una versión buena con una candidata. Incluya HTML nativo como respaldo, conserve los datos escritos y limpie listeners, temporizadores y nodos aunque falle una aserción.

async function revisarComponente() {
  const host = document.createElement('div');
  host.innerHTML =
    '<form><label>Proyecto <input name="project" value="alpha"></label><web-status><span slot="label">Listo</span></web-status><button>Continuar</button></form><p id="status" role="status"></p><button id="fallback" hidden>Usar formulario estándar</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 = 'Usar formulario estándar';
      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') ? 'Enviado' : 'Falta proyecto';
    return status.textContent === 'Enviado' ? 'supported' : 'application';
  } catch (error) {
    fallback.hidden = false;
    status.textContent = 'Usar formulario estándar';
    return 'application';
  } finally {
    host.remove();
  }
}

Compruebe registro antes y después de la definición, actualización de elementos creados por el parser, callbacks idempotentes y doble registro. Para Shadow DOM pruebe root, slots vacíos y repetidos, slotchange, variables heredadas, forced colors, zoom y eventos composed. Para formularios pruebe FormData, disabled, reset y validación. Para accesibilidad pruebe nombre, foco, teclado, Escape, estados y retorno de foco.

Hoja de trabajo y decisiones

Componente/etiqueta:
Revisión y responsable de definición:
Build / perfil / plataforma / viewport / idioma:
URL y revisión del fixture:
Contrato: atributos, propiedades, eventos, slots:
Registro, upgrade, Shadow DOM y estilos:
Valor de formulario y validación:
Teclado, nombre, foco y estado:
Resultado de aplicación y fallback:
Primera versión buena / mala:
Responsable, próxima acción y caducidad del rollback:

Observación	Clasificación	Acción acotada
Todo pasa en el mismo fixture	Compatible	Incluir candidato y guardar evidencia
API funciona, contrato falla	Aplicación	Corregir componente, no culpar navegador
Solo cambia con actualización y variables fijas	Regresión candidata	Repetir, asignar responsable y rollback temporal
Solo falla un perfil, política o plataforma	Entorno	Corregir entorno y repetir
Resultado alterna	Intermitente	Guardar fallos, investigar timing, no afirmar soporte
Variables o evidencia incompletas	Desconocido	Detener decisión y recoger comparación de una variable

BotBrowser permite probar un fixture autorizado de Web Components en contextos controlados y comparar registro, renderizado e interacción visible. BotBrowser no garantiza conformidad, accesibilidad, calidad del componente ni paridad de producción. Registre límites y use funciones avanzadas. Mantenga el respaldo hasta que los responsables acepten la matriz.

Registro y ciclo de vida

Compruebe registro único, actualización, inserción dinámica, eliminación, reinserción y limpieza tras navegación. Separe un fallo de registro de un fallo de aplicación o dependencia.

Renderizado y accesibilidad

Revise nombre accesible, rol, estado, foco, teclado, zoom, textos largos y mensajes de error. En formularios compruebe valor, desactivación, restablecimiento, validación y envío.

Matriz de versiones

Fije bundle, perfil, plataforma, viewport, idioma, permisos y datos sintéticos para cada versión. Registre la primera aserción que cambia y conserve la última versión aceptada para volver atrás.

Entrega de la decisión

Incluya versión del componente, revisión del fixture, navegador, aserciones visibles, identificador de evidencia, responsable y condición de parada. Consulte también compatibilidad de APIs y respaldos y triaje tras actualizaciones.

Comprobar límites:

Ejecute solo rutas autorizadas y marque como fuera de alcance cualquier navegador o dependencia no probada.

Registro de ejecución

Registre el contrato aprobado antes de ampliar la matriz.

Repita el registro después de una navegación.

Compare nombre accesible y foco, no solo píxeles.

Conserve la versión aceptada para volver atrás.

Anote la primera aserción que cambió.

Separe errores del componente y del entorno.

Use datos sintéticos para formularios.

Marque como desconocida una ejecución sin control.

Revise traducciones largas y mensajes de error.

Asigne responsable a cada resultado incierto.

Mantenga el mismo texto de la aserción en cada fila de la matriz y registre la versión del componente, el navegador y el identificador de ejecución.

Evidencia final

Conserve la aserción, el navegador y el identificador de cada ejecución.

La decisión debe indicar alcance, responsable y próxima revisión.

Fuentes

Defina el alcance antes de ampliar la matriz.

Repita el registro en una carga inicial y en una navegación posterior.

Compare el nombre accesible y el orden de foco, no solo los píxeles.

Conserve la versión aceptada para una vuelta atrás rápida.

Anote la primera aserción que cambió.

Separe errores del componente de errores del entorno.

Use datos sintéticos para comprobar formularios.

Marque como desconocida una ejecución sin estado controlado.

Revise traducciones largas y mensajes de error.

Asigne responsable para cada resultado incierto.

Revalide después de cambiar el paquete o la dependencia.

• Custom elements WHATWG
• Web Components MDN
• BotBrowser