Svelte引入Google字体时crossorigin属性报JS2322类型不匹配错误

Svelte的属性类型校验规则和原生HTML解析逻辑存在差异：

• 原生HTML中crossorigin属于枚举属性，直接书写属性名、不赋值时，默认等价于开启匿名模式的跨域声明，属于合法写法
• Svelte的JS/TS类型定义中，crossorigin属性的类型被标注为字符串，直接裸写无值属性时，Svelte会将其识别为布尔值true，因此触发 Type 'boolean' is not assignable to type 'string' 的类型报错。

给crossorigin属性显式传入合法字符串值即可修复报错，两种可选写法的运行效果和原生裸写crossorigin完全一致，都能正常实现预连接效果：

• 写法1：赋值为空字符串，写法最简洁

<svelte:head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</svelte:head>

• 写法2：显式赋值为anonymous，语义更清晰

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">

注：两种写法都不会干扰Google Fonts的正常加载逻辑，可根据个人编码习惯选择。

内容的提问来源于stack exchange，提问作者Tchaly Leandre Jr.