浏览器组件兼容性复核

Web Components 包含 custom elements、Shadow DOM、模板和 slots。复核不能只看 customElements 是否存在，还要观察生命周期、组合、样式、表单、焦点和用户可见结果。参考 WHATWG 规范 与 MDN 指南，把浏览器能力与应用契约分开。

契约与受控 fixture

记录标签、属性、属性值、事件、slots、状态、表单值和键盘行为。比较 first-known-good 与 candidate 时固定 bundle、Profile、平台、viewport、语言、权限和数据。保留原生 HTML fallback，保留用户输入，并在每个分支清除监听器、计时器和临时节点。检查 upgrade、重复 callback、重复注册、空和命名 slot、slotchange、继承样式、composed event、FormData、disabled、reset、validation、可访问名称、Tab 顺序和 Escape。

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();
  }
}

工作表与决策表

组件/版本；浏览器、Profile、平台；fixture 与契约；注册和 Shadow DOM；
表单值；键盘、名称、焦点、状态；应用结果和 fallback；
first good/first bad；负责人、下一步、回滚期限。

观察	分类	有边界的动作
所有检查在同一 fixture 通过	支持	纳入 candidate 并保存证据
API 存在但契约失败	应用问题	修复组件，不先归因浏览器
固定变量后只在更新后改变	候选回归	重跑、指定负责人、临时回滚
只有某 Profile、策略或平台失败	环境问题	修复环境并重跑
结果交替	间歇性	保存失败并调查 timing
变量或证据不完整	未知	暂停决定并做单变量比较

BotBrowser 支持在受控浏览器 context 中重复已授权的 Web Components fixture，并比较注册、渲染和可见交互结果。BotBrowser 不会认证标准符合性、可访问性、组件质量或生产一致性。请附上 BotBrowser 文档 和未测试边界，保留 fallback，直到组件、浏览器和可访问性负责人共同批准。

注册与生命周期

确认标签只注册一次，并检查 parser 创建、动态插入、移除、重新插入和导航后的状态。分别记录注册、渲染、事件和清理失败，避免把应用问题误判为浏览器问题。

渲染与可访问性

检查可见名称、角色、状态、焦点指示、键盘操作、缩放、长文本和错误提示。表单组件还要验证 disabled、required、reset、validation 和提交值。

版本矩阵

为每个浏览器版本固定相同的 bundle、Profile、平台、viewport、语言、权限和合成数据。失败时记录最先改变的断言，并保留上一个已接受版本用于回滚。

发布交接

交接记录应包含组件版本、fixture 修订、浏览器版本、可见断言、证据编号、负责人和停止条件。相关实践可参考 浏览器 API 兼容性与 fallback 与 浏览器更新回归分诊。

检查边界

只在授权路径和合成数据上运行，未测试的浏览器、平台和依赖应明确标记为范围外。

最终证据

扩大矩阵前先固定已批准的契约。

导航后重复注册检查。

比较可访问名称和焦点，不只比较像素。

保留已接受版本以便回滚。

记录第一个发生变化的断言。

区分组件错误和环境错误。

使用合成数据检查表单。

没有受控状态的运行标记为未知。

检查长译文和错误提示。

为每个不确定结果指定负责人。

在矩阵的每一行使用相同的断言文本，并记录组件版本、浏览器版本和运行编号。

决定应注明范围、负责人和下一次复核日期。

来源

• WHATWG custom elements
• MDN Web Components
• BotBrowser