‘编译器警告’

如果 Svelte 发现潜在错误（例如编写无法访问的标记），它会在编译时警告你。

¥Svelte warns you at compile time if it catches potential mistakes, such as writing inaccessible markup.

有些警告在你的具体用例中可能不正确。你可以通过在导致警告的行上方放置 <!-- svelte-ignore <code> --> 注释来禁用此类误报。示例：

¥Some warnings may be incorrect in your concrete use case. You can disable such false positives by placing a <!-- svelte-ignore <code> --> comment above the line that causes the warning. Example:

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

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

¥You can list multiple rules in a single comment (separated by commas), and add an explanatory note (in parentheses) alongside them:

<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions (because of reasons) -->
<div onclick>...</div>

a11y_accesskey

Avoid using accesskey

强制元素不使用 accesskey。访问键是 HTML 属性，允许 Web 开发者为元素分配键盘快捷键。屏幕阅读器和仅使用键盘的用户使用的键盘快捷键和键盘命令之间的不一致会造成可访问性问题。为避免复杂化，不应使用访问键。

¥Enforce no accesskey on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screen reader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.

<!-- A11y: Avoid using accesskey -->
<div accesskey="z"></div>

a11y_aria_activedescendant_has_tabindex

An element with an aria-activedescendant attribute should have a tabindex value

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

¥An element with aria-activedescendant must be tabbable, so it must either have an inherent tabindex or declare tabindex as an attribute.

<!-- A11y: Elements with attribute aria-activedescendant should have tabindex value -->
<div aria-activedescendant="some-id"></div>

a11y_aria_attributes

`<%name%>` should not have aria-* attributes

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

¥Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example meta, html, script, style. This rule enforces that these DOM elements do not contain the aria-* props.

<!-- A11y: <meta> should not have aria-* attributes -->
<meta aria-hidden="false" />

a11y_autocomplete_valid

'%value%' is an invalid value for 'autocomplete' on `<input type="%type%">`

a11y_autofocus

Avoid using autofocus

强制元素不使用 autofocus。自动对焦元素可能会给视力正常和视力不佳的用户带来可用性问题。

¥Enforce that autofocus is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.

<!-- A11y: Avoid using autofocus -->
<input autofocus />

a11y_click_events_have_key_events

Visible, non-interactive elements with a click event must be accompanied by a keyboard event handler. Consider whether an interactive element such as `<button type="button">` or `<a>` might be more appropriate

强制具有 onclick 事件的可见、非交互元素附带键盘事件处理程序。

¥Enforce that visible, non-interactive elements with an onclick event are accompanied by a keyboard event handler.

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

¥Users should first consider whether an interactive element might be more appropriate such as a <button type="button"> element for actions or <a> element for navigations. These elements are more semantically meaningful and will have built-in key handling. E.g. Space and Enter will trigger a <button> and Enter will trigger an <a> element.

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

¥If a non-interactive element is required then onclick should be accompanied by an onkeyup or onkeydown handler that enables the user to perform equivalent actions via the keyboard. In order for the user to be able to trigger a key press, the element will also need to be focusable by adding a tabindex. While an onkeypress handler will also silence this warning, it should be noted that the keypress event is deprecated.

<!-- A11y: visible, non-interactive elements with an onclick event must be accompanied by a keyboard event handler. -->
<div onclick={() => {}}></div>

键盘编码对于无法使用鼠标的主体残疾用户、AT 兼容性和屏幕阅读器用户非常重要。

¥Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.

a11y_consider_explicit_label

Buttons and links should either contain text or have an `aria-label` or `aria-labelledby` attribute

a11y_distracting_elements

Avoid `<%name%>` elements

强制不使用分散注意力的元素。视觉上分散注意力的元素可能会导致视障用户的可访问性问题。此类元素很可能已弃用，应避免使用。

¥Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided.

以下元素在视觉上分散注意力：<marquee> 和 <blink>。

¥The following elements are visually distracting: <marquee> and <blink>.

<!-- A11y: Avoid <marquee> elements -->
<marquee></marquee>

a11y_figcaption_index

`<figcaption>` must be first or last child of `<figure>`

a11y_figcaption_parent

`<figcaption>` must be an immediate child of `<figure>`

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

¥Enforce that certain DOM elements have the correct structure.

<!-- A11y: <figcaption> must be an immediate child of <figure> -->
<div>
	<figcaption>Image caption</figcaption>
</div>

a11y_hidden

`<%name%>` element should not be hidden

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

¥Certain DOM elements are useful for screen reader navigation and should not be hidden.

<!-- A11y: <h2> element should not be hidden -->
<h2 aria-hidden="true">invisible header</h2>

a11y_img_redundant_alt

Screenreaders already announce `<img>` elements as an image

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

¥Enforce img alt attribute does not contain the word image, picture, or photo. Screen readers already announce img elements as an image. There is no need to use words such as image, photo, and/or picture.

<img src="foo" alt="Foo eating a sandwich." />

<!-- aria-hidden, won't be announced by screen reader -->
<img src="bar" aria-hidden="true" alt="Picture of me taking a photo of an image" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Photo of foo being weird." />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="bar" alt="Image of me at a bar!" />

<!-- A11y: Screen readers already announce <img> elements as an image. -->
<img src="foo" alt="Picture of baz fixing a bug." />

a11y_incorrect_aria_attribute_type

The value of '%attribute%' must be a %type%

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

¥Enforce that only the correct type of value is used for aria attributes. For example, aria-hidden should only receive a boolean.

<!-- A11y: The value of 'aria-hidden' must be exactly one of true or false -->
<div aria-hidden="yes"></div>

a11y_incorrect_aria_attribute_type_boolean

The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty

a11y_incorrect_aria_attribute_type_id

The value of '%attribute%' must be a string that represents a DOM element ID

a11y_incorrect_aria_attribute_type_idlist

The value of '%attribute%' must be a space-separated list of strings that represent DOM element IDs

a11y_incorrect_aria_attribute_type_integer

The value of '%attribute%' must be an integer

a11y_incorrect_aria_attribute_type_token

The value of '%attribute%' must be exactly one of %values%

a11y_incorrect_aria_attribute_type_tokenlist

The value of '%attribute%' must be a space-separated list of one or more of %values%

a11y_incorrect_aria_attribute_type_tristate

The value of '%attribute%' must be exactly one of true, false, or mixed

a11y_interactive_supports_focus

Elements with the '%role%' interactive role must have a tabindex value

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

¥Enforce that elements with an interactive role and interactive handlers (mouse or key press) must be focusable or tabbable.

<!-- A11y: Elements with the 'button' interactive role must have a tabindex value. -->
<div role="button" onkeypress={() => {}} />

a11y_invalid_attribute

'%href_value%' is not a valid %href_attribute% attribute

强制可访问性所需的属性具有有效值。例如，href 不应为空、'#' 或 javascript:。

¥Enforce that attributes important for accessibility have a valid value. For example, href should not be empty, '#', or javascript:.

<!-- A11y: '' is not a valid href attribute -->
<a href="">invalid</a>

a11y_label_has_associated_control

A form label must be associated with a control

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

¥Enforce that a label tag has a text label and an associated control.

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

¥There are two supported ways to associate a label with a control:

• 将控件封装在标签中。

  ¥Wrapping a control in a label tag.

• 将 for 添加到标签并为其分配页面上输入的 ID。

  ¥Adding for to a label and assigning it the ID of an input on the page.

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

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

<!-- A11y: A form label must be associated with a control. -->
<label>A</label>

a11y_media_has_caption

`<video>` elements must have a `<track kind="captions">`

为媒体提供字幕对于聋哑用户跟进至关重要。字幕应为对话、音效、相关音乐提示和其他相关音频信息的转录或翻译。这不仅对于可访问性很重要，而且在媒体不可用的情况下对所有用户也很有用（类似于无法加载图片时图片上的 alt 文本）。

¥Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to alt text on an image when an image is unable to load).

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

¥The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are not necessary for video components with the muted attribute.

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

<audio muted></audio>

<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
<video></video>

<!-- A11y: Media elements must have a <track kind=\"captions\"> -->
<video><track /></video>

a11y_misplaced_role

`<%name%>` should not have role attribute

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

¥Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example meta, html, script, style. This rule enforces that these DOM elements do not contain the role props.

<!-- A11y: <meta> should not have role attribute -->
<meta role="tooltip" />

a11y_misplaced_scope

The scope attribute should only be used with `<th>` elements

scope 属性应仅用于 <th> 元素。

¥The scope attribute should only be used on <th> elements.

<!-- A11y: The scope attribute should only be used with <th> elements -->
<div scope="row" />

a11y_missing_attribute

`<%name%>` element should have %article% %sequence% attribute

强制可访问性所需的属性存在于元素上。这包括以下检查：

¥Enforce that attributes required for accessibility are present on an element. This includes the following checks:

• <a> 应该有一个 href（除非它是 片段定义标签）

  ¥<a> should have an href (unless it’s a fragment-defining tag)

• <area> 应该有 alt、aria-label 或 aria-labelledby

  ¥<area> should have alt, aria-label, or aria-labelledby

• <html> 应该有 lang

  ¥<html> should have lang

• <iframe> 应该有 title

  ¥<iframe> should have title

• <img> 应该有 alt

  ¥<img> should have alt

• <object> 应该有 title、aria-label 或 aria-labelledby

  ¥<object> should have title, aria-label, or aria-labelledby

• <input type="image"> 应该有 alt、aria-label 或 aria-labelledby

  ¥<input type="image"> should have alt, aria-label, or aria-labelledby

<!-- A11y: <input type=\"image\"> element should have an alt, aria-label or aria-labelledby attribute -->
<input type="image" />

<!-- A11y: <html> element should have a lang attribute -->
<html></html>

<!-- A11y: <a> element should have an href attribute -->
<a>text</a>

a11y_missing_content

`<%name%>` element should contain text

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

¥Enforce that heading elements (h1, h2, etc.) and anchors have content and that the content is accessible to screen readers

<!-- A11y: <a> element should have child content -->
<a href="/foo"></a>

<!-- A11y: <h1> element should have child content -->
<h1></h1>

a11y_mouse_events_have_key_events

'%event%' event must be accompanied by '%accompanied_by%' event

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

¥Enforce that onmouseover and onmouseout are accompanied by onfocus and onblur, respectively. This helps to ensure that any functionality triggered by these mouse events is also accessible to keyboard users.

<!-- A11y: onmouseover must be accompanied by onfocus -->
<div onmouseover={handleMouseover} />

<!-- A11y: onmouseout must be accompanied by onblur -->
<div onmouseout={handleMouseout} />

a11y_no_abstract_role

Abstract role '%role%' is forbidden

a11y_no_interactive_element_to_noninteractive_role

`<%element%>` cannot have role '%role%'

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

¥WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include article, banner, complementary, img, listitem, main, region and tooltip.

<!-- A11y: <textarea> cannot have role 'listitem' -->
<textarea role="listitem"></textarea>

a11y_no_noninteractive_element_interactions

Non-interactive element `<%element%>` should not be assigned mouse or keyboard event listeners

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

¥A non-interactive element does not support event handlers (mouse and key handlers). Non-interactive elements include <main>, <area>, <h1> (,<h2>, etc), <p>, <img>, <li>, <ul> and <ol>. Non-interactive WAI-ARIA roles include article, banner, complementary, img, listitem, main, region and tooltip.

<!-- `A11y: Non-interactive element <li> should not be assigned mouse or keyboard event listeners.` -->
<li onclick={() => {}}></li>

<!-- `A11y: Non-interactive element <div> should not be assigned mouse or keyboard event listeners.` -->
<div role="listitem" onclick={() => {}}></div>

a11y_no_noninteractive_element_to_interactive_role

Non-interactive element `<%element%>` cannot have interactive role '%role%'

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

¥WAI-ARIA roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch and textbox.

<!-- A11y: Non-interactive element <h3> cannot have interactive role 'searchbox' -->
<h3 role="searchbox">Button</h3>

a11y_no_noninteractive_tabindex

noninteractive element cannot have nonnegative tabIndex value

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

¥Tab key navigation should be limited to elements on the page that can be interacted with.

<!-- A11y: noninteractive element cannot have nonnegative tabIndex value -->
<div tabindex="0"></div>

a11y_no_redundant_roles

Redundant role '%role%'

某些 HTML 元素具有默认的 ARIA 角色。为这些元素提供已由浏览器 没有效果 设置且多余的 ARIA 角色。

¥Some HTML elements have default ARIA roles. Giving these elements an ARIA role that is already set by the browser has no effect and is redundant.

<!-- A11y: Redundant role 'button' -->
<button role="button">...</button>

<!-- A11y: Redundant role 'img' -->
<img role="img" src="foo.jpg" />

a11y_no_static_element_interactions

`<%element%>` with a %handler% handler must have an ARIA role

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

¥Elements like <div> with interactive handlers like click must have an ARIA role.

<!-- A11y: <div> with click handler must have an ARIA role -->
<div onclick={() => ''}></div>

a11y_positive_tabindex

Avoid tabindex values above zero

避免使用正的 tabindex 属性值。这会将元素移出预期的制表符顺序，从而给键盘用户带来混乱的体验。

¥Avoid positive tabindex property values. This will move elements out of the expected tab order, creating a confusing experience for keyboard users.

<!-- A11y: avoid tabindex values above zero -->
<div tabindex="1"></div>

a11y_role_has_required_aria_props

Elements with the ARIA role "%role%" must have the following attributes defined: %props%

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

¥Elements with ARIA roles must have all required attributes for that role.

<!-- A11y: A11y: Elements with the ARIA role "checkbox" must have the following attributes defined: "aria-checked" -->
<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>

a11y_role_supports_aria_props

The attribute '%attribute%' is not supported by the role '%role%'

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

¥Elements with explicit or implicit roles defined contain only aria-* properties supported by that role.

<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
<div role="link" aria-multiline></div>

<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
<li aria-required></li>

a11y_role_supports_aria_props_implicit

The attribute '%attribute%' is not supported by the role '%role%'. This role is implicit on the element `<%name%>`

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

¥Elements with explicit or implicit roles defined contain only aria-* properties supported by that role.

<!-- A11y: The attribute 'aria-multiline' is not supported by the role 'link'. -->
<div role="link" aria-multiline></div>

<!-- A11y: The attribute 'aria-required' is not supported by the role 'listitem'. This role is implicit on the element <li>. -->
<li aria-required></li>

a11y_unknown_aria_attribute

Unknown aria attribute 'aria-%attribute%'

Unknown aria attribute 'aria-%attribute%'. Did you mean '%suggestion%'?

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

¥Enforce that only known ARIA attributes are used. This is based on the WAI-ARIA States and Properties spec.

<!-- A11y: Unknown aria attribute 'aria-labeledby' (did you mean 'labelledby'?) -->
<input type="image" aria-labeledby="foo" />

a11y_unknown_role

Unknown role '%role%'

Unknown role '%role%'. Did you mean '%suggestion%'?

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

¥Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to role definitions can be found at WAI-ARIA site.

<!-- A11y: Unknown role 'toooltip' (did you mean 'tooltip'?) -->
<div role="toooltip"></div>

attribute_avoid_is

The "is" attribute is not supported cross-browser and should be avoided

attribute_global_event_reference

You are referencing `globalThis.%name%`. Did you forget to declare a variable with that name?

attribute_illegal_colon

Attributes should not contain ':' characters to prevent ambiguity with Svelte directives

attribute_invalid_property_name

'%wrong%' is not a valid HTML attribute. Did you mean '%right%'?

attribute_quoted

Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes

bind_invalid_each_rest

The rest operator (...) will create a new object and binding '%name%' with the original object will not work

block_empty

Empty block

component_name_lowercase

`<%name%>` will be treated as an HTML element unless it begins with a capital letter

css_unused_selector

Unused CSS selector "%name%"

Svelte 遍历模板和 <style> 标签，以找出模板中未使用的 CSS 选择器，以便将其删除。

¥Svelte traverses both the template and the <style> tag to find out which of the CSS selectors are not used within the template, so it can remove them.

在某些情况下，选择器可能会将非 ‘visible’ 的元素定位到编译器，例如因为它是 {@html ...} 标签的一部分，或者你正在覆盖子组件中的样式。在这些情况下，使用 :global 保留选择器原样：

¥In some situations a selector may target an element that is not ‘visible’ to the compiler, for example because it is part of an {@html ...} tag or you’re overriding styles in a child component. In these cases, use :global to preserve the selector as-is:

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

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

element_invalid_self_closing_tag

Self-closing HTML tags for non-void elements are ambiguous — use `<%name% ...></%name%>` rather than `<%name% ... />`

在 HTML 中，有 没有自闭合标签。虽然这看起来像一个独立的元素，旁边有一些文本……

¥In HTML, there’s no such thing as a self-closing tag. While this looks like a self-contained element with some text next to it...

<div>
	<span class="icon" /> some text!
</div>

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

¥...a spec-compliant HTML parser (such as a browser) will in fact parse it like this, with the text inside the icon:

<div>
	<span class="icon"> some text! </span>
</div>

一些模板语言（包括 Svelte）会通过将 <span /> 转换为 <span></span> 来 ‘fix’ HTML。其他内容遵守规范。在不同上下文之间复制粘贴代码时，两者都会导致歧义和混淆，因此 Svelte 会提示你通过使用明确的结束标记直接解决歧义。

¥Some templating languages (including Svelte) will ‘fix’ HTML by turning <span /> into <span></span>. Others adhere to the spec. Both result in ambiguity and confusion when copy-pasting code between different contexts, and as such Svelte prompts you to resolve the ambiguity directly by having an explicit closing tag.

要实现此自动化，请运行专用迁移：

¥To automate this, run the dedicated migration:

npx sv migrate self-closing-tags

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

¥In a future version of Svelte, self-closing tags may be upgraded from a warning to an error.

event_directive_deprecated

Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead

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

¥See the migration guide for more info.

export_let_unused

Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`

legacy_code

`%code%` is no longer valid — please use `%suggestion%` instead

legacy_component_creation

Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.

请参阅 迁移指南 了解更多信息。

¥See the migration guide for more info.

node_invalid_placement_ssr

%message%. When rendering this component on the server, the resulting HTML will be modified by the browser (by moving, removing, or inserting elements), likely resulting in a `hydration_mismatch` warning

HTML 限制了某些元素可以出现的位置。如果发生违规，浏览器将以破坏 Svelte 对组件结构的假设的方式 ‘repair’ HTML。一些示例：

¥HTML restricts where certain elements can appear. In case of a violation the browser will ‘repair’ the HTML in a way that breaks Svelte’s assumptions about the structure of your components. Some examples:

• <p>hello <div>world</div></p> 将导致 <p>hello </p><div>world</div><p></p>（<div> 自动关闭 <p>，因为 <p> 不能包含块级元素）

  ¥<p>hello <div>world</div></p> will result in <p>hello </p><div>world</div><p></p> (the <div> autoclosed the <p> because <p> cannot contain block-level elements)

• <option><div>option a</div></option> 将导致 <option>option a</option>（<div> 被删除）

  ¥<option><div>option a</div></option> will result in <option>option a</option> (the <div> is removed)

• <table><tr><td>cell</td></tr></table> 将导致 <table><tbody><tr><td>cell</td></tr></tbody></table>（<tbody> 自动插入）

  ¥<table><tr><td>cell</td></tr></table> will result in <table><tbody><tr><td>cell</td></tr></tbody></table> (a <tbody> is auto-inserted)

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

¥This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.

non_reactive_update

`%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates

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

¥This warning is thrown when the compiler detects the following:

• 声明的变量没有 $state 或 $state.raw

  ¥a variable was declared without $state or $state.raw

• 变量被重新分配

  ¥the variable is reassigned

• 变量在反应性上下文中读取

  ¥the variable is read in a reactive context

在这种情况下，更改值将无法正确触发更新。示例：

¥In this case, changing the value will not correctly trigger updates. Example:

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

<p>This value updates: {reactive}</p>
<p>This value does not update: {stale}</p>

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

要解决此问题，请用 $state 封装变量声明。

¥To fix this, wrap your variable declaration with $state.

options_deprecated_accessors

The `accessors` option has been deprecated. It will have no effect in runes mode

options_deprecated_immutable

The `immutable` option has been deprecated. It will have no effect in runes mode

options_missing_custom_element

The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?

options_removed_enable_sourcemap

The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them

options_removed_hydratable

The `hydratable` option has been removed. Svelte components are always hydratable now

options_removed_loop_guard_timeout

The `loopGuardTimeout` option has been removed

options_renamed_ssr_dom

`generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively

perf_avoid_inline_class

Avoid 'new class' — instead, declare the class at the top level scope

perf_avoid_nested_class

Avoid declaring classes below the top level scope

reactive_declaration_invalid_placement

Reactive declarations only exist at the top level of the instance script

reactive_declaration_module_script_dependency

Reassignments of module-level declarations will not cause reactive statements to update

script_context_deprecated

`context="module"` is deprecated, use the `module` attribute instead

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

script_unknown_attribute

Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it

slot_element_deprecated

Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead

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

¥See the migration guide for more info.

state_referenced_locally

State referenced in its own scope will never update. Did you mean to reference it inside a closure?

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

¥This warning is thrown when the compiler detects the following:

• 声明了一个反应变量

  ¥A reactive variable is declared

• 变量被重新分配

  ¥the variable is reassigned

• 变量在声明的相同范围内引用，并且它是非反应性上下文

  ¥the variable is referenced inside the same scope it is declared and it is a non-reactive context

在这种情况下，无论你将状态重新分配传递给什么，都不会注意到它。例如，如果你将状态传递给函数，该函数将不会注意到更新：

¥In this case, the state reassignment will not be noticed by whatever you passed it to. For example, if you pass the state to a function, that function will not notice the updates:

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

	let count = $state(0);

	// warning: state_referenced_locally
	setContext('count', count);
</script>

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

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

	let count = $state(0);

	// warning: state_referenced_locally
	setContext('count', count);
</script>

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

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

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

<!-- This will never update -->
<p>The count is {count}</p>

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

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

<!-- This will never update -->
<p>The count is {count}</p>

要修复此问题，请引用变量，以便对其进行延迟评估。对于上述示例，可以通过将 count 封装在函数中来实现：

¥To fix this, reference the variable such that it is lazily evaluated. For the above example, this can be achieved by wrapping count in a function:

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

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

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

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

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

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

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

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

<!-- This will update -->
<p>The count is {count()}</p>

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

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

<!-- This will update -->
<p>The count is {count()}</p>

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

¥For more info, see Passing state into functions.

store_rune_conflict

It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity

svelte_component_deprecated

`<svelte:component>` is deprecated in runes mode — components are dynamic by default

在以前版本的 Svelte 中，组件构造函数在渲染组件时已修复。换句话说，如果你希望 <X> 在 X 更改时重新渲染，你要么必须使用 <svelte:component this={X}>，要么将组件放在 {#key X}...{/key} 块内。

¥In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted <X> to re-render when X changed, you would either have to use <svelte:component this={X}> or put the component inside a {#key X}...{/key} block.

在 Svelte 5 中，这不再是事实 - 如果 X 发生变化，<X> 会重新渲染。

¥In Svelte 5 this is no longer true — if X changes, <X> re-renders.

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

¥In some cases <object.property> syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.

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

¥For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where @const can be used:

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

派生值可用于其他上下文：

¥A derived value may be used in other contexts:

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

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

svelte_element_invalid_this

`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte

svelte_self_deprecated

`<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead

有关更多信息，请参阅 文档中的注释。

¥See the note in the docs for more info.

unknown_code

`%code%` is not a recognised code

`%code%` is not a recognised code (did you mean `%suggestion%`?)