Svelte参考文档

编译器警告

如果 Svelte 检测到潜在错误，比如编写不可访问的标记，它会在编译时发出警告。

在您的具体用例中，某些警告可能不正确。您可以通过在引起警告的行上方放置  注释来禁用这些误报。示例：

<!-- svelte-ignore a11y_autofocus -->
<input autofocus />

您可以在单个注释中列出多个规则（用逗号分隔），并在旁边添加说明性注释（用括号表示）：

<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (由于原因) -->
<div onclick>...</div>

a11y_accesskey

避免使用 accesskey

禁止在元素上使用 accesskey。访问键是允许 Web 开发人员为元素分配键盘快捷键的 HTML 属性。键盘快捷键与屏幕阅读器和仅使用键盘的用户所使用的键盘命令之间的不一致会造成可访问性问题。为避免这些问题，不应使用访问键。

<!-- A11y: 避免使用 accesskey -->
<div accesskey="z"></div>

a11y_aria_activedescendant_has_tabindex

具有 aria-activedescendant 属性的元素应具有 tabindex 值

具有 aria-activedescendant 的元素必须是可切换的，因此它必须具有固有的 tabindex 或声明 tabindex 作为属性。

<!-- A11y: 具有属性 aria-activedescendant 的元素应具有 tabindex 值 -->
<div aria-activedescendant="some-id"></div>

a11y_aria_attributes

`<%name%>` 不应具有 aria-* 属性

某些保留的 DOM 元素不支持 ARIA 角色、状态和属性。这通常是因为它们不可见，例如 meta、html、script、style。此规则强制这些 DOM 元素不包含 aria-* 属性。

<!-- A11y: <meta> 不应具有 aria-* 属性 -->
<meta aria-hidden="false" />

a11y_autocomplete_valid

'%value%' 是 `<input type="%type%">` 上 'autocomplete' 的无效值

a11y_autofocus

避免使用 autofocus

强制不在元素上使用 autofocus。自动聚焦的元素可能对有视力的用户和无视力用户造成可用性问题。

<!-- A11y: 避免使用 autofocus -->
<input autofocus />

a11y_click_events_have_key_events

具有点击事件的可见非交互元素必须伴随一个键盘事件处理程序。请考虑使用 `<button type="button">` 或 `<a>` 这样的交互元素可能更合适

强制可见的非交互元素与 onclick 事件伴随一个键盘事件处理程序。

用户应首先考虑使用交互元素是否可能更合适，例如用于 actions的 <button type="button"> 元素或用于导航的 <a> 元素。这些元素在语义上更有意义，并具有内置的键处理。例如，Space 和 Enter 将触发 <button>，而 Enter 将触发 <a> 元素。

如果需要非交互元素，则 onclick 应伴随 onkeyup 或 onkeydown 处理程序，以允许用户通过键盘执行等效操作。为了使用户能够触发按键事件，元素还需要通过添加 tabindex 来使其可聚焦。虽然 onkeypress 处理程序也会消除此警告，但应注意 keypress 事件已被弃用。

<!-- A11y: 具有 onclick 事件的可见非交互元素必须伴随一个键盘事件处理程序。 -->
<div onclick={() => {}}></div>

为键盘编写代码对无法使用鼠标的身体残疾用户、辅助技术兼容性和屏幕阅读器用户非常重要。

a11y_consider_explicit_label

按钮和链接应包含文本或具有 `aria-label` 或 `aria-labelledby` 属性

a11y_distracting_elements

避免 `<%name%>` 元素

强制不使用干扰元素。可以在视觉上产生干扰的元素可能会导致视力受限用户的可访问性问题。这些元素很可能已经被弃用，应加以避免。

以下元素视觉上具有干扰性：<marquee> 和 <blink>。

<!-- A11y: 避免 <marquee> 元素 -->
<marquee></marquee>

a11y_figcaption_index

`<figcaption>` 必须是 `<figure>` 的第一个或最后一个子元素

a11y_figcaption_parent

`<figcaption>` 必须是 `<figure>` 的直接子元素

强制某些 DOM 元素具有正确的结构。

<!-- A11y: <figcaption> 必须是 <figure> 的直接子元素 -->
<div>
	<figcaption>图像说明</figcaption>
</div>

a11y_hidden

`<%name%>` 元素不应被隐藏

某些 DOM 元素对于屏幕阅读器导航很有用，不能被隐藏。

<!-- A11y: <h2> 元素不应被隐藏 -->
<h2 aria-hidden="true">不可见的标题</h2>

a11y_img_redundant_alt

屏幕阅读器会将 `<img>` 元素宣布为图像

强制 img alt 属性中不包含单词图像、图片或照片。屏幕阅读器会将 img 元素宣布为图像。没有必要使用像 image、photo 和/或 picture 这样的词。

<img src="foo" alt="Foo 在吃三明治。" />

<!-- aria-hidden，不会被屏幕阅读器宣布 -->
<img src="bar" aria-hidden="true" alt="我拍摄图像的照片" />

<!-- A11y: 屏幕阅读器会将 <img> 元素宣布为图像。 -->
<img src="foo" alt="Foo 奇怪的照片。" />

<!-- A11y: 屏幕阅读器会将 <img> 元素宣布为图像。 -->
<img src="bar" alt="我在酒吧的照片！" />

<!-- A11y: 屏幕阅读器会将 <img> 元素宣布为图像。 -->
<img src="foo" alt="Baz 修复错误的图片。" />

a11y_incorrect_aria_attribute_type

'%attribute%' 的值必须是 %type%

强制 aria 属性只能使用正确类型的值。例如，aria-hidden 应只接收布尔值。

<!-- A11y: 'aria-hidden' 的值必须是 true 或 false 中的一个 -->
<div aria-hidden="yes"></div>

a11y_incorrect_aria_attribute_type_boolean

'%attribute%' 的值必须是 'true' 或 'false'。不能为空

a11y_incorrect_aria_attribute_type_id

'%attribute%' 的值必须是表示 DOM 元素 ID 的字符串

a11y_incorrect_aria_attribute_type_idlist

'%attribute%' 的值必须是表示 DOM 元素 ID 的以空格分隔的字符串列表

a11y_incorrect_aria_attribute_type_integer

'%attribute%' 的值必须是整数

a11y_incorrect_aria_attribute_type_token

'%attribute%' 的值必须是 %values% 中的一个

a11y_incorrect_aria_attribute_type_tokenlist

'%attribute%' 的值必须是以空格分隔的一个或多个 %values%

a11y_incorrect_aria_attribute_type_tristate

'%attribute%' 的值必须是 true、false 或 mixed 中的一个

a11y_interactive_supports_focus

具有 '%role%' 交互角色的元素必须具有 tabindex 值

强制具有交互角色和交互处理程序（鼠标或键按下）的元素必须可聚焦或可制表。

<!-- A11y: 具有 'button' 交互角色的元素必须具有 tabindex 值。 -->
<div role="button" onkeypress={() => {}} />

a11y_invalid_attribute

'%href_value%' 不是有效的 %href_attribute% 属性

强制对无障碍性重要的属性具有有效值。例如，href 不应为空、'#' 或 javascript:。

<!-- A11y: '' 不是有效的 href 属性 -->
<a href="">无效</a>

a11y_label_has_associated_control

表单标签必须与控件关联

强制标签标签具有文本标签和相关控件。

有两种受支持的方法将标签与控件关联：

将控件包装在标签标签中。
向标签添加 for 并将其分配给页面上输入的 ID。

<label for="id">B</label>

<label>C <input type="text" /></label>

<!-- A11y: 表单标签必须与控件关联。 -->
<label>A</label>

a11y_media_has_caption

`<video>` 元素必须具有 `<track kind="captions">`

为媒体提供字幕对听障用户跟上进度至关重要。字幕应为对话、声音效果、相关音乐提示及其他相关音频信息的抄本或翻译。这不仅对无障碍性很重要，在媒体不可用的情况下，对所有用户也可有所帮助（类似于图像未能加载时的 alt 文本）。

字幕应包含所有重要且相关的信息，以便了解相应的媒体。这可能意味着字幕并不是媒体内容对话的 1:1 映射。但是，对于具有 muted 属性的视频组件，字幕并不是必需的。

<video><track kind="captions" /></video>

<audio muted></audio>

<!-- A11y: 媒体元素必须具有 <track kind=\"captions\"> -->
<video></video>

<!-- A11y: 媒体元素必须具有 <track kind=\"captions\"> -->
<video><track /></video>

a11y_misplaced_role

`<%name%>` 不应具有角色属性

某些保留的 DOM 元素不支持 ARIA 角色、状态和属性。这通常是因为它们不可见，例如 meta、html、script、style。此规则强制这些 DOM 元素不包含 role 属性。

<!-- A11y: <meta> 不应具有角色属性 -->
<meta role="tooltip" />

a11y_misplaced_scope

scope 属性应仅在 `<th>` 元素上使用

scope 属性应仅在 <th> 元素上使用。

<!-- A11y: scope 属性应仅在 <th> 元素上使用 -->
<div scope="row" />

a11y_missing_attribute

`<%name%>` 元素应具有 %article% %sequence% 属性

强制元素上存在对无障碍性所需的属性。这包括以下检查：

<a> 应具有 href（除非它是一个 fragment-defining tag）
<area> 应具有 alt、aria-label 或 aria-labelledby
<html> 应具有 lang
<iframe> 应具有 title
<img> 应具有 alt
<object> 应具有 title、aria-label 或 aria-labelledby
<input type="image"> 应具有 alt、aria-label 或 aria-labelledby

<!-- A11y: <input type=\"image\"> 元素应具有 alt、aria-label 或 aria-labelledby 属性 -->
<input type="image" />

<!-- A11y: <html> 元素应具有 lang 属性 -->
<html></html>

<!-- A11y: <a> 元素应具有 href 属性 -->
<a>文本</a>

a11y_missing_content

`<%name%>` 元素应包含文本

强制标头元素（h1、h2 等）和锚点具有内容，并且该内容可供屏幕阅读器读取。

<!-- A11y: <a> 元素必须有子内容 -->
<a href="/foo"></a>

<!-- A11y: <h1> 元素必须有子内容 -->
<h1></h1>

a11y_mouse_events_have_key_events

'%event%' 事件必须伴随 '%accompanied_by%' 事件

强制 onmouseover 和 onmouseout 分别伴随 onfocus 和 onblur。这有助于确保通过这些鼠标事件触发的任何功能也可以供键盘用户访问。

<!-- A11y: onmouseover 必须伴随 onfocus -->
<div onmouseover={handleMouseover} />

<!-- A11y: onmouseout 必须伴随 onblur -->
<div onmouseout={handleMouseout} />

a11y_no_abstract_role

禁止使用抽象角色 '%role%'

a11y_no_interactive_element_to_noninteractive_role

`<%element%>` 不能具有角色 '%role%'

WAI-ARIA 角色不应用于将交互元素转换为非交互元素。非交互 ARIA 角色包括 article、banner、complementary、img、listitem、main、region 和 tooltip。

<!-- A11y: <textarea> 不能具有角色 'listitem' -->
<textarea role="listitem"></textarea>

a11y_no_noninteractive_element_interactions

非交互元素 `<%element%>` 不应分配鼠标或键盘事件侦听器

非交互元素不支持事件处理程序（鼠标和键盘处理程序）。非交互元素包括 <main>、<area>、<h1>（<h2> 等）、<p>、<img>、<li>、<ul> 和 <ol>。非交互 WAI-ARIA 角色包括 article、banner、complementary、img、listitem、main、region 和 tooltip。

<!-- `A11y: 非交互元素 <li> 不应分配鼠标或键盘事件侦听器。` -->
<li onclick={() => {}}></li>

<!-- `A11y: 非交互元素 <div> 不应分配鼠标或键盘事件侦听器。` -->
<div role="listitem" onclick={() => {}}></div>

a11y_no_noninteractive_element_to_interactive_role

非交互元素 `<%element%>` 不能具有交互角色 '%role%'

WAI-ARIA 角色不应用于将非交互元素转换为交互元素。交互 ARIA 角色包括 button、link、checkbox、menuitem、menuitemcheckbox、menuitemradio、option、radio、searchbox、switch 和 textbox。

<!-- A11y: 非交互元素 <h3> 不能具有交互角色 'searchbox' -->
<h3 role="searchbox">按钮</h3>

a11y_no_noninteractive_tabindex

非交互元素不能具有非负的 tabIndex 值

Tab 键导航应限制在页面上可以交互的元素上。

<!-- A11y: 非交互元素不能具有非负的 tabIndex 值 -->
<div tabindex="0"></div>

a11y_no_redundant_roles

冗余角色 '%role%'

某些 HTML 元素具有默认的 ARIA 角色。将这些元素赋予浏览器已设置的 ARIA 角色无效，且是冗余的。

<!-- A11y: 冗余角色 'button' -->
<button role="button">...</button>

<!-- A11y: 冗余角色 'img' -->
<img role="img" src="foo.jpg" />

a11y_no_static_element_interactions

具有 %handler% 处理程序的 `<%element%>` 必须具有 ARIA 角色

像 <div> 这样的元素具有交互处理程序，如 click，必须具有 ARIA 角色。

<!-- A11y: <div> 具有点击处理程序必须具有 ARIA 角色 -->
<div onclick={() => ''}></div>

a11y_positive_tabindex

避免设置大于零的 tabindex 值

避免设置正的 tabindex 属性值。这将使元素移出预期的选项卡顺序，为键盘用户创造混乱的体验。

<!-- A11y: 避免大于零的 tabindex 值 -->
<div tabindex="1"></div>

a11y_role_has_required_aria_props

具有 ARIA 角色 "%role%" 的元素必须定义以下属性：%props%

具有 ARIA 角色的元素必须具有该角色所需的所有属性。

<!-- A11y: 具有 ARIA 角色 "checkbox" 的元素必须定义以下属性： "aria-checked" -->
<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>

a11y_role_supports_aria_props

属性 '%attribute%' 不受角色 '%role%' 支持

具有显式或隐式角色定义的元素仅包含该角色支持的 aria-* 属性。

<!-- A11y: 属性 'aria-multiline' 不受角色 'link' 支持。 -->
<div role="link" aria-multiline></div>

<!-- A11y: 属性 'aria-required' 不受角色 'listitem' 支持。此角色在元素 <li> 上是隐式的。 -->
<li aria-required></li>

a11y_role_supports_aria_props_implicit

属性 '%attribute%' 不受角色 '%role%' 支持。此角色在元素 `<%name%>` 上是隐式的

具有显式或隐式角色定义的元素仅包含该角色支持的 aria-* 属性。

<!-- A11y: 属性 'aria-multiline' 不受角色 'link' 支持。 -->
<div role="link" aria-multiline></div>

<!-- A11y: 属性 'aria-required' 不受角色 'listitem' 支持。此角色在元素 <li> 上是隐式的。 -->
<li aria-required></li>

a11y_unknown_aria_attribute

未知的 aria 属性 'aria-%attribute%'

未知的 aria 属性 'aria-%attribute%'。您是指 '%suggestion%' 吗？

强制仅使用已知的 ARIA 属性。这基于 WAI-ARIA 状态和属性规范。

<!-- A11y: 未知的 aria 属性 'aria-labeledby'（您是指 'labelledby' 吗？） -->
<input type="image" aria-labeledby="foo" />

a11y_unknown_role

未知角色 '%role%'

未知角色 '%role%'。您是指 '%suggestion%' 吗？

具有 ARIA 角色的元素必须使用有效的、非抽象的 ARIA 角色。有关角色定义的参考可以在 WAI-ARIA 网站上找到。

<!-- A11y: 未知角色 'toooltip'（您是指 'tooltip' 吗？） -->
<div role="toooltip"></div>

attribute_avoid_is

"is" 属性在跨浏览器中不受支持，应避免使用

attribute_global_event_reference

您正在引用 `globalThis.%name%`。您是否忘记声明一个名为此的变量？

attribute_illegal_colon

属性不应包含 ':' 字符，以防止与 Svelte 指令的歧义

attribute_invalid_property_name

'%wrong%' 不是有效的 HTML 属性。您是指 '%right%' 吗？

attribute_quoted

组件和自定义元素上的引用属性将在未来版本的 Svelte 中被字符串化。如果这不是您想要的，请移除引号

bind_invalid_each_rest

剩余运算符 (...) 将创建一个新对象，使用原始对象绑定 '%name%' 将无法正常工作

block_empty

空块

component_name_lowercase

`<%name%>` 将被视为 HTML 元素，除非它以大写字母开头

css_unused_selector

未使用的 CSS 选择器 "%name%"

Svelte 遍历模板和 <style> 标签，以确定其中哪些 CSS 选择器未在模板中使用，从而可以将其移除。

在某些情况下，选择器可能会针对对编译器“不可见”的元素，例如因为它是 {@html ...} 标签的一部分，或您在子组件中覆盖样式。在这些情况下，请使用 :global 以保持选择器的原样：

<div class="post">{@html content}</div>

<style>
  .post :global {
	p {...}
  }
</style>

element_invalid_self_closing_tag

非空元素的自闭合 HTML 标签是模糊的 — 使用 `<%name% ...></%name%>` 而不是 `<%name% ... />`

在 HTML 中，没有自闭合标签。虽然这 看起来 像是一个包裹着一些文本的自包含元素...

<div><span class="icon" /> 一些文字！</div>

...规范合规的 HTML 解析器（例如浏览器）实际上会将它解析为这样，文本在图标内：

<div>
	<span class="icon"> 一些文本！ </span>
</div>

一些模板语言（包括 Svelte）会通过将 <span /> 转换为 <span></span> 来“修复” HTML。其他则遵循规范。在不同上下文中复制和粘贴代码时，两者都会导致模糊和混淆，因此 Svelte 提示您通过使用显式的闭合标签来直接解决这种模糊。

要自动化此过程，请运行专门的迁移：

npx sv migrate self-closing-tags

在未来的 Svelte 版本中，自闭合标签可能会从警告升级为错误。

event_directive_deprecated

使用 `on:%name%` 监听 %name% 事件已弃用。请改用事件属性 `on%name%`

有关更多信息，请参见迁移指南。

export_let_unused

组件具有未使用的导出属性 '%name%'。如果仅为外部引用，请考虑使用 `export const %name%`

legacy_code

`%code%` 不再有效 — 请改用 `%suggestion%`

legacy_component_creation

Svelte 5 组件不再是类。请改用 `mount` 或 `hydrate`（从 'svelte' 导入）来实例化它们。

有关更多信息，请参见迁移指南。

node_invalid_placement_ssr

%message%。在服务器上呈现此组件时，结果 HTML 将被浏览器修改（通过移动、删除或插入元素），可能导致 `hydration_mismatch` 警告

HTML 限制某些元素的出现位置。在违反情况下，浏览器将以一种破坏 Svelte 对组件结构假设的方式“修复” HTML。一些示例：

<p>hello <div>world</div></p> 将结果为 <p>hello </p><div>world</div><p></p>（<div> 会自动关闭 <p>，因为 <p> 不能包含块级元素）
<option><div>option a</div></option> 将结果为 <option>option a</option>（<div> 被删除）
<table><tr><td>cell</td></tr></table> 将结果为 <table><tbody><tr><td>cell</td></tr></tbody></table>（会自动插入 <tbody>）

当组件在客户端呈现时，此代码将正常工作（这就是为什么这是一个警告而不是错误），但如果您使用服务器呈现，它将导致水合失败。

non_reactive_update

`%name%` 被更新，但未用 `$state(...)` 声明。改变其值将无法正确触发更新

当编译器检测到以下内容时，将抛出此警告：

变量在没有 $state 或 $state.raw 的情况下声明
变量被重新赋值
在响应式上下文中读取变量

在这种情况下，改变值不会正确触发更新。示例：

<script>
	let reactive = $state('reactive');
	let stale = 'stale';
</script>

<p>此值更新：{reactive}</p>
<p>此值不会更新：{stale}</p>

<button onclick={() => {
	stale = 'updated';
	reactive = 'updated';
}}>更新</button>

要修复此问题，请将变量声明包装在 $state 内。

options_deprecated_accessors

`accessors` 选项已弃用。在 runes 模式下无效

options_deprecated_immutable

`immutable` 选项已弃用。在 runes 模式下无效

options_missing_custom_element

`customElement` 选项在生成自定义元素时使用。您是否忘记了 `customElement: true` 编译选项？

options_removed_enable_sourcemap

`enableSourcemap` 选项已被删除。现在总是生成源地图，工具可以选择忽略它们

options_removed_hydratable

`hydratable` 选项已被删除。Svelte 组件现在总是可水合的

options_removed_loop_guard_timeout

`loopGuardTimeout` 选项已被删除

options_renamed_ssr_dom

`generate: "dom"` 和 `generate: "ssr"` 选项已更名为 "client" 和 "server"

perf_avoid_inline_class

避免使用 'new class' — 相反，在顶层作用域声明类

perf_avoid_nested_class

避免在顶层作用域下方声明类

reactive_declaration_invalid_placement

响应式声明仅存在于实例脚本的顶层

reactive_declaration_module_script_dependency

模块级声明的重新分配不会导致响应式语句更新

script_context_deprecated

`context="module"` 已弃用，请改用 `module` 属性

<script context="module" module>
	let foo = 'bar';
</script>

script_unknown_attribute

未识别的属性 — 应为 `generics`、`lang` 或 `module`。如果这是预处理器的情况，请确保预处理器删除它

slot_element_deprecated

使用 `<slot>` 渲染父内容已弃用。请改用 `{@render ...}` 标签

有关更多信息，请参见迁移指南。

state_referenced_locally

在其自身作用域中引用的状态将永远不会更新。您是否想在闭包内部引用它？

当编译器检测到以下情况时，将抛出此警告：

声明了一个响应式变量
变量被重新赋值
在声明变量的相同作用域中引用变量，且为非响应式上下文

在这种情况下，状态重赋值不会被您传递的任何内容注意到。例如，如果您将状态传递给一个函数，则该函数不会注意到更新：

Parent

<script>
	import { setContext } from 'svelte';

	let count = $state(0);

	// 警告：state_referenced_locally
	setContext('count', count);
</script>

<button onclick={() => count++}>
	递增
</button>

<script lang="ts">
	import { setContext } from 'svelte';

	let count = $state(0);

	// 警告：state_referenced_locally
	setContext('count', count);
</script>

<button onclick={() => count++}>
	递增
</button>

Child

<script>
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!-- 这将永远不会更新 -->
<p>当前计数为 {count}</p>

<script lang="ts">
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!-- 这将永远不会更新 -->
<p>当前计数为 {count}</p>

要修复此问题，请引用变量，以便它可以懒惰地计算。对于上述示例，可以通过将 count 包装在函数中来完成：

Parent

<script>
	import { setContext } from 'svelte';

	let count = $state(0);
	setContext('count', () => count);
</script>

<button onclick={() => count++}>
	递增
</button>

<script lang="ts">
	import { setContext } from 'svelte';

	let count = $state(0);
	setContext('count', () => count);
</script>

<button onclick={() => count++}>
	递增
</button>

Child

<script>
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!--这将会更新-->
<p>当前计数为 {count()}</p>

<script lang="ts">
	import { getContext } from 'svelte';

	const count = getContext('count');
</script>

<!--这将会更新-->
<p>当前计数为 {count()}</p>

有关更多信息，请参见将状态传递给函数。

store_rune_conflict

看起来您正在使用 `$%name%` 符文，但存在一个名为 `%name%` 的本地绑定。使用 `$` 前缀引用本地变量会创建一个存储订阅。请重命名 `%name%` 以避免歧义

svelte_component_deprecated

`<svelte:component>` 在 runes 模式中已弃用 — 组件默认为动态

在 Svelte 的早期版本中，当组件呈现时，组件构造函数是固定的。换句话说，如果您希望 <X> 在 X 更改时重新呈现，则必须使用 <svelte:component this={X}> 或将组件放入 {#key X}...{/key} 块中。

在 Svelte 5 中，这不再成立 — 如果 X 更改，<X> 会重新呈现。

在某些情况下，可以使用 <object.property> 语法作为替代；带有属性访问的转小写变量在 Svelte 5 中被识别为组件。

对于复杂的组件解析逻辑，可能需要一个中间的首字母大写的变量。例如，在可以使用 @const 的地方：

{#each items as item}
	<svelte:component this={item.condition ? Y : Z} />
	{@const Component = item.condition ? Y : Z}
	<Component />
{/each}

派生值可以在其他上下文中使用：

<script>
	// ...
	let condition = $state(false);
	const Component = $derived(condition ? Y : Z);
</script>

<svelte:component this={condition ? Y : Z} />
<Component />

svelte_element_invalid_this

`this` 应为 `{expression}`。在未来版本的 Svelte 中使用字符串属性值将导致错误

svelte_self_deprecated

`<svelte:self>` 已弃用 — 请改用自我导入（例如 `import %name% from './%basename%'`）

有关更多信息，请参见文档中的说明。

unknown_code

`%code%` 不是已识别的代码

`%code%` 不是已识别的代码（您是指 `%suggestion%` 吗？）

在 GitHub 编辑此页面

编译器错误运行时错误