Atributos

Os atributos de um elemento Html no svelte funcionam da mesma forma que em um arquivo Html comum.

Exemplo:

<button class="btn">Clique</button>

Também é possível colocar o valor do atributo sem aspas "".

<button class=btn>Clique</button>

Observação: Só vai funcionar se o valor não tiver espaço. Isso aqui não vai funcionar como você espera:

<button class=btn btn-primary>Clique</button>

A classe btn vai funcionar normalmente, mas btn-primary var ser considerado como um atributo. É como se a tag <button> tivesse um atributo btn-primary. O que não é verdade. btn-primary será considerado uma propriedade (ou prop).

Atributos x Props

Atributo é um recurso do DOM e Propriedade (ou prop) são os valores passados para um componente.

<!-- "class" é um atributo pois faz parte do DOM -->
<button class="btn">Clique</button>

<!-- "Button" é um componente e possui uma propriedade "tamanho" -->
<Button tamanho={15}>Clique</Button>

Os valores dos atributos podem ser ou conter expressões javascript.

<script>
    const disabled = true
    const page = 'pagina-de-contato'
</script>

 <!-- Esse botão ficará desabilitado pois o valor de disabled é true. -->
<button class="btn" disabled={disabled}>Clique</button>

 <!-- O atributo href desse link será "/pagina-de-contato". -->
<a href="/{page}">Clique</a>

Importante: Quando estiver lidando com aributos booleanos (exemplo: checked, disabled, readonly, required, etc…), você precisa saber que eles são incluídos na tag Html quando seu valor for truthy e removidos da tag quando o valor for falsy.

Todos os outros atributos são incluídos, exceto se o valor for null ou undefined.

 <!-- O atributo title não será incluído na div. Seu valor é nulo. -->
<div title={null}>Div</div>

Shorthand property

Se o atributo ou propriedade tiver um valor com o mesmo nome, você pode fazer isso:

<!-- App.svelte -->
<script>
    const disabled = true
</script>

<!-- Forma comum -->
<button disabled={disabled}>...</button>

<!-- Forma abreviada -->
<button {disabled}>...</button>

Spread attributes

Você pode “espalhar” os atributos dentro de um elemento.

Ao invés de fazer isso:

<button type="button" name="btn" id="btn" disabled>Clique</button>

Você pode fazer isso:

<!-- App.svelte -->
<script>
    const attributes = {
        type: "button",
        name: "btn",
        id: "btn",
        disabled: true
    }
</script>

<button {...attributes}>Clique</button>

Olhando o código acima, você tem a certeza que escreveu mais código para fazer a mesma coisa. É verdade! Mas a medida que seu código cresce, isso pode melhorar a legibilidade. Deixa seu código Html mais “limpo”.

Você também pode colocar vários “spread attributes”.

<!-- App.svelte -->
<script>
    const defaultAttributes = {
        type: "button",
        name: "btn",
        id: "btn",
        disabled: true
    }

    const otherAttributes = {
        autofocus: true,
        class: 'btn btn-primary'
    }
</script>

<button {...defaultAttributes} {...otherAttributes}>Clique</button>