在iPadOS 17.2中如何禁用Chrome的chrome_annotation标签？

核心原因 #

这个<chrome_annotation>标签是iPadOS 17.2中Chrome的智能文本识别功能（针对@提及、链接等内容的自动解析）自动插入的，会干扰Lit的DOM diff和后续渲染流程。

可行解决方案 #

1. 禁用Chrome的智能文本识别功能 #

• 打开Chrome，点击右上角菜单 → 设置 → 隐私和安全 → 网站设置 → 找到「智能文本」或「文本互动」选项（不同版本命名可能略有差异），关闭所有相关识别开关（尤其是@提及识别）。
• 若仅需针对当前网站生效，可在网站权限设置中单独禁用该网站的智能文本处理权限。

2. 在Lit组件中阻止Chrome解析文本 #

在渲染含@字符的文本时，通过以下方式避免Chrome触发自动注释：

• 使用纯文本绑定：确保Lit将文本当作纯内容渲染，而非可解析的HTML。示例：

  render() {
    return html`
      <div>${this.userText}</div>
    `;
  }
  

  这里this.userText是含@的字符串，Lit默认会将其作为纯文本插入，不会触发Chrome的HTML解析行为。
• 添加阻止解析的属性：在包裹文本的元素上添加contenteditable="false"属性，阻止Chrome对文本的交互解析：

  render() {
    return html`
      <div contenteditable="false">${this.userText}</div>
    `;
  }
  

• 使用CSS禁用文本交互：给目标元素添加CSS样式，阻止Chrome的触摸和文本识别：

  .no-chrome-annotation {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  

  在Lit组件中应用该类：

  render() {
    return html`
      <div class="no-chrome-annotation">${this.userText}</div>
    `;
  }
  

3. 转义@字符（临时应急方案） #

如果上述方法无效，可以临时将@字符转义为HTML实体@，渲染后会显示为@，但不会触发Chrome的识别：

render() {
  const escapedText = this.userText.replace(/@/g, '@');
  return html`
    <div>${escapedText}</div>
  `;
}

内容的提问来源于stack exchange，提问作者Michael Rivera