组件内的标记可以被视为 HTML++。

## 
标签

一个小写标签，如`<div>`，表示一个常规 HTML 元素。一个大写标签或使用点符号的标签，例如`<Widget>`或`<my.stuff>`，表示一个*组件*。

```svelte
<script>
	import Widget from './Widget.svelte';
</script>

<div>
	<Widget />
</div>
```

## 
元素属性

默认情况下，属性与它们的 HTML 对应项完全相同。

```svelte
<div class="foo">
	<button disabled>can't touch this</button>
</div>
```

与 HTML 一样，值可能未加引号。

`＜input type=checkbox /＞`

属性值可以包含 JavaScript 表达式。

```svelte
<a href="page/{p}">page {p}</a>
```

或者它们可以是 *JavaScript 表达式*。

```svelte
<button disabled={!clickable}>...</button>
```

布尔属性在元素上包含，如果它们的值是[真值](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)，如果它们是[假值](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)则排除。

所有其他属性都包含在内，除非它们的值为[空值](https://developer.mozilla.org/en-US/docs/Glossary/Nullish)（`null`或`undefined`）。

```svelte
<input required={false} placeholder="This input field is not required" />
<div title={null}>This div has no title attribute</div>
```

> \[注意\] 引用单个表达式不会影响值的解析方式，但在 Svelte 6 中，它将导致值被强制转换为字符串：
> 
> ```svelte
> <button disabled="{number !== 42}">...</button>
> ```

當屬性名稱和值匹配（`name={name}`）時，它們可以與`{name}`替換。

```svelte
<button {disabled}>...</button>
<!-- equivalent to
<button disabled={disabled}>...</button>
-->
```

## 
组件属性

按照惯例，传递给组件的值被称为*属性*或*props*，而不是*属性*，后者是 DOM 的一个特性。

与元素一样，`name={name}` 可以用 `{name}` 简写代替。

```svelte
<Widget foo={bar} answer={42} text="hello" />
```

## 
扩展属性

*扩展属性*允许一次性将许多属性或属性传递给一个元素或组件。

一个元素或组件可以拥有多个扩展属性，这些属性与常规属性交错。顺序很重要——如果存在 `things.a`，则它将优先于 `a="b"`，而 `c="d"` 将优先于 `things.c`：

```svelte
<Widget a="b" {...things} c="d" />
```

## 
事件

监听 DOM 事件可以通过向元素添加以`on`开头的属性来实现。例如，要监听`click`事件，请向按钮添加`onclick`属性：

```svelte
<button onclick={() => console.log('clicked')}>click me</button>
```

事件属性区分大小写。\``onclick`\` 监听 \``click`\` 事件，\``onClick`\` 监听 \``Click`\` 事件，这是不同的。这确保您可以监听包含大写字母的自定义事件。

因为事件只是属性，所以适用于属性的规则同样适用：

*   您可以使用缩写形式： `<button {onclick}>click me</button>`
*   你可以将它们传播： `<button {...thisSpreadContainsEventAttributes}>click me</button>`

时间上，事件属性总是在绑定的事件之后触发（例如，`oninput` 总是在 `bind:value` 更新之后触发）。底层中，一些事件处理器直接通过 `addEventListener` 绑定，而另一些则是 *委托* 的。

当使用`ontouchstart`和`ontouchmove`事件属性时，处理程序是[passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners)以获得更好的性能。这大大提高了响应速度，允许浏览器立即滚动文档，而不是等待查看事件处理程序是否调用`event.preventDefault()`。

在极少数需要防止这些事件默认行为的情况下，您应该使用 [`on`](svelte-events#on) 代替（例如在操作中）。

### 
事件委托

为了减少内存占用并提高性能，Svelte 使用了一种称为事件委托的技术。这意味着对于某些事件——请参阅以下列表——应用程序根目录下的单个事件监听器负责处理事件路径上的任何处理程序。

有一些需要注意的陷阱：

*   当你手动派发一个带有委托监听器的事件时，请确保设置`{ bubbles: true }`选项，否则它不会到达应用程序根目录
*   当直接使用`addEventListener`时，请避免调用`stopPropagation`，否则事件将无法到达应用程序根节点，处理程序也不会被调用。同样，在应用程序根节点内部手动添加的处理程序将在 DOM 中声明性更深处的处理程序（例如，使用`onclick={...}`）之前运行*before*，在捕获和冒泡阶段都如此。因此，最好使用从`svelte/events`导入的`on`函数，而不是使用`addEventListener`，因为它将确保顺序得到保留，并且正确处理`stopPropagation`。

以下事件处理程序被委派：

*   `输入之前`
*   `点击`
*   `更改`
*   `dblclick`
*   `上下文菜单`
*   `focusin`
*   `focusout`
*   `输入`
*   `keydown`
*   `keyup`
*   `mousedown`
*   `mousemove`
*   `mouseout`
*   `mouseover`
*   `mouseup`
*   `pointerdown`
*   `pointermove`
*   `指针出`
*   `pointerover`
*   `pointerup`
*   `touchend`
*   `touchmove`
*   `touchstart`

## 
文本表达式

一个 JavaScript 表达式可以通过用花括号包围它来作为文本包含。

`{表达式}`

表达式为`null`或`undefined`的将被省略；其余所有表达式都将被强制转换为字符串。[转换为字符串](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion)。

花括号可以通过使用它们的 HTML 实体字符串在 Svelte 模板中包含：用于`{`的`&lbrace;`、`&lcub;`或`&#123;`，以及用于`}`的`&rbrace;`、`&rcub;`或`&#125;`。

如果您使用的是正则表达式（`RegExp`）[字面表示法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor)，您需要将其括在括号内。

```svelte
<h1>Hello {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>
```

表达式将被转换为字符串并转义，以防止代码注入。如果您想渲染 HTML，请使用`{@html}`标签。

```svelte
{@html potentiallyUnsafeHtmlString}
```

> \[!注意\] 确保您要么转义传递的字符串，要么只填充您控制的值，以防止[XSS 攻击](https://owasp.org/www-community/attacks/xss/)

## 
注释

您可以在组件内部使用 HTML 注释。

```svelte
<!-- this is a comment! --><h1>Hello world</h1>
```

注释以`svelte-ignore`开始的代码禁用后续标记块的警告。通常，这些是可访问性警告；请确保您有充分的理由来禁用它们。

```svelte
<!-- svelte-ignore a11y_autofocus -->
<input bind:value={name} autofocus />
```

您可以在注释中添加以`@component`开头的特殊注释，当在其他文件中悬停到组件名称上时，该注释将显示出来。

```svelte
<!--
@component
- You can use markdown here.
- You can also use code blocks here.
- Usage:
  ```html
  <Main name="Arethra">
  ```
-->
<script>
	let { name } = $props();
</script>

<main>
	<h1>
		Hello, {name}
	</h1>
</main>
```