Me doy cuenta entonces cuando estoy escribiendo HTML, por ejemplo, en una plantilla esbelta, que el formateador más bonito que he configurado para mi editor siempre elimina la parte value= para que
<label> <input type="checkbox" bind:group={foo.bar} name="bar" value={value} <——— /> {value} </label>se convierte en
<label> <input type="checkbox" bind:group={foo.bar} name="bar" {value} <——- /> {value} </label> y, sin embargo, cuando busco los documentos de referencia del elemento input type='checkbox' en MDN, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox , no dice value= es opcional. Estoy usando la entrada en un formulario y pensé que era necesario tener value= . Por supuesto, empíricamente puedo probar esto, pero aún no lo he hecho. Tengo curiosidad por saber lo que usted puede compartir acerca de esto.
El nombre del atributo es obligatorio en HTML. La cuestión es que el código que está compartiendo puede parecer HTML, pero no lo es. Es una expresión de JavaScript con apariencia de HTML que luego será procesada por Svelte y convertida en HTML real.
En la documentación de Svelte te explican lo que estás viendo:
Cuando el nombre del atributo y el valor coinciden (
name={name}), se pueden reemplazar con{name}.<!-- These are equivalent --> <button disabled={disabled}>...</button> <button {disabled}>...</button>
Esa es la razón por la que su editor elimina el value={value} y lo reduce a solo {value} : porque la propiedad y la variable con el valor tienen el mismo nombre .
Si estuviera usando HTML real, entonces no podría omitir el nombre de la propiedad y tendría que escribir todo el value="value" (observe que estaría entre comillas en lugar de llaves).