@ -663,7 +663,7 @@ A `<select>` value binding corresponds to the `value` property on the selected `
---
---
A `<select multiple>` element behaves similarly to a checkbox group.
A `<select multiple>` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected `<option>`.
```sv
```sv
<selectmultiplebind:value={fillings}>
<selectmultiplebind:value={fillings}>
@ -1024,7 +1024,7 @@ Like actions, transitions can have parameters.
Transitions can use custom functions. If the returned object has a `css` function, Svelte will create a CSS animation that plays on the element.
Transitions can use custom functions. If the returned object has a `css` function, Svelte will create a CSS animation that plays on the element.
The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. *In* transitions run from `0` to `1`, *out* transitions run from `1` to `0` —in other words `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. *In* transitions run from `0` to `1`, *out* transitions run from `1` to `0` —in other words,`1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
The function is called repeatedly *before* the transition begins, with different `t` and `u` arguments.
The function is called repeatedly *before* the transition begins, with different `t` and `u` arguments.
@ -1307,14 +1307,12 @@ A custom animation function can also return a `tick` function, which is called *
@ -1415,7 +1413,7 @@ Svelte's CSS Variables support allows for easily themeable components:
---
---
So you can set a highlevel theme color:
So you can set a high-level theme color:
```css
```css
/* global.css */
/* global.css */
@ -1575,7 +1573,7 @@ Note that explicitly passing in an empty named slot will add that slot's name to
---
---
Slots can be rendered zero or more times, and can pass values *back* to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
Slots can be rendered zero or more times and can pass values *back* to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
@ -1666,11 +1664,11 @@ If `this` is falsy, no component is rendered.
The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful for example when displaying rich text content from a CMS. Any properties and event listeners present will be applied to the element.
The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful for example when displaying rich text content from a CMS. Any properties and event listeners present will be applied to the element.
The only supported binding is `bind:this`, since the element typespecific bindings that Svelte does at build time (e.g. `bind:value` for input elements) do not work with a dynamic tag type.
The only supported binding is `bind:this`, since the element type-specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) do not work with a dynamic tag type.
If `this` has a nullish value, the element and its children will not be rendered.
If `this` has a nullish value, the element and its children will not be rendered.
If `this` is the name of a void tag (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode.
If `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode.
```sv
```sv
<script>
<script>
@ -1716,7 +1714,7 @@ You can also bind to the following properties:
* `outerHeight`
* `outerHeight`
* `scrollX`
* `scrollX`
* `scrollY`
* `scrollY`
* `online` — an alias for window.navigator.onLine
* `online` — an alias for `window.navigator.onLine`
Puru Vijay
2 years ago