Marcação Básica

Editar esta página na GitHub

Marcadorespermalink

Um marcador escrito com letras minúsculos, como <div>, denota um elemento de HTML normal. Um marcador escrito com a primeira letra em maiúscula, tal como <Widget> ou <Namespace.Widget>, indica um componente:

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

<div>
  <Widget />
</div>

Atributos e Propriedadespermalink

Por padrão, os atributos funcionam exatamente como os seus equivalentes de HTML:

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

Tal como no HTML, os valores não precisam estar entre aspas:

<input type="checkbox" />

Os valores de atributo podem conter expressões de JavaScript:

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

Ou podem ser expressões de JavaScript:

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

Os atributos booleanos são incluídos sobre o elemento se o seu valor for verdadeiro e excluídos se for falso.

Todos os outros atributos são incluídos a menos que seu valor seja nulo (null ou undefined):

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

Uma expressão pode incluir caracteres que fariam com que o destacamento de sintaxe falhasse no HTML normal, então é permitido colocar aspas no valor. As aspas não afetam em como o valor é analisado:

<button disabled={number !== 42}>...</button>

Quando o nome do atributo e valor corresponderem-se (name={name}), podem ser substituídos por {name}:

<button {disabled}>...</button>
<!-- equivalente ao
<button disabled={disabled}>...</button>
-->

Por convenção, os valores passados aos componentes são referidos como propriedades ao invés de atributos, que são uma funcionalidade do DOM.

Tal como acontece com os elementos, name={name} podem ser substituídos pela abreviação {name}:

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

Os atributos de propagação permitem que muitos atributos ou propriedades sejam passados à um elemento ou componente de uma só vez.

Um elemento ou componente pode ter vários atributos de propagação, intercalados com atributos normais:

<Widget {...things} />

$$props refere-se a todas as propriedades que são passadas ao componente, incluindo aquelas que não são declaradas com export. Geralmente não é recomendado, uma vez que é difícil para a Svelte otimizar. Mas pode ser útil em casos raros – por exemplo, quando não sabemos no momento da compilação quais propriedades podem ser passadas à um componente:

<Widget {...$$props} />

$$restProps contém apenas as propriedades que não são declaradas com export. Pode ser usada para passar outros atributos desconhecidos à um elemento num componente. Partilha os mesmos problemas de otimização que a $$props, e igualmente não é recomendado:

<input {...$$restProps} />

O atributo value dum elemento input ou seus elementos option filhos não devem ser definidos com atributos de propagação quando usamos bind:group ou bind:checked. A Svelte precisa ser capaz de ver o value do elemento diretamente na marcação nestes casos para que possa ligá-lo à variável vinculada.

Algumas vezes, a ordem do atributo importa, uma vez que a Svelte define os atributos sequencialmente na JavaScript. Por exemplo, <input type="range" min="0" max="1" value={0.5} step="0.1"/>, a Svelte tentará definir o valor para 1 (arredondando-o a partir de 0.5 uma vez que o passo por padrão é 1), e então definir o passo para 0.1. Para corrigir isto, o mudamos para <input type="range" min="0" max="1" step="0.1" value={0.5}/>.

Um outro exemplo é <img src="..." loading="lazy" />. A Svelte definirá o src da imagem antes de tornar o elemento de imagem loading="lazy", o que é provavelmente muito tarde. Mudamos isto para <img loading="lazy" src="...">para fazer a imagem ser carregada preguiçosamente.

Expressões de Textopermalink

{expression}

O texto também pode conter expressões de JavaScript:

Se estivermos a usar uma notação literal de expressão regular (RegExp), precisaremos envolvê-lo em parênteses.

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

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

Comentáriospermalink

Nós podemos usar os comentários de HTML dentro dos componentes:

<!-- isto é um comentário! --><h1>Hello world</h1>

Os comentários começam com os avisos de desativação da svelte-ignore para o próximo bloco de marcação. Normalmente, estes são avisos de acessibilidade; devemos certificar-nos de que estamos a desativá-los por uma boa razão:

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