You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/docs/01-introduction/xx-props.md
+22Lines changed: 22 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -26,6 +26,28 @@ You can specify a fallback value for a prop. It will be used if the component's
26
26
</script>
27
27
```
28
28
29
+
> [!NOTE] If a prop is explicitly passed as null, the default value will not be used, and null will be assigned instead. However, if the prop is undefined or not provided at all, the default value will be used.
30
+
31
+
```svelte
32
+
<script>
33
+
let { answer = 3 } = $props();
34
+
</script>
35
+
36
+
<p>The answer is {answer}</p>
37
+
```
38
+
39
+
```svelte
40
+
<script>
41
+
import Nested from './Nested.svelte';
42
+
</script>
43
+
44
+
<Nested answer={42} /> <!-- answer is set to 42 -->
45
+
<Nested answer={null} /> <!-- answer is set to null (default value is not used)-->
46
+
<Nested /> <!-- answer is set to default value -->
47
+
<Nested answer={undefined}/> <!-- answer is set to default value -->
Copy file name to clipboardExpand all lines: documentation/docs/03-template-syntax/01-basic-markup.md
+43Lines changed: 43 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -72,6 +72,29 @@ When the attribute name and value match (`name={name}`), they can be replaced wi
72
72
-->
73
73
```
74
74
75
+
When passing null or undefined to an attribute, the attribute is omitted from the rendered HTML.
76
+
77
+
```svelte
78
+
<script>
79
+
let someId = undefined;
80
+
let someClass = null;
81
+
</script>
82
+
83
+
<div id={someId} class={someClass}>Attributes are not included.</div>
84
+
<!-- The 'id' and 'class' attributes won't be included in the rendered HTML -->
85
+
```
86
+
87
+
If an empty string ("") is assigned to an attribute, the attribute remains in the HTML but with an empty value.
88
+
89
+
```svelte
90
+
<script>
91
+
let emptyClass = ""
92
+
</script>
93
+
94
+
<div class={emptyClass}>Hello</div>
95
+
<!-- This will render as: <div class="">Hello</div> -->
96
+
```
97
+
75
98
## Component props
76
99
77
100
By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
@@ -154,6 +177,26 @@ A JavaScript expression can be included as text by surrounding it with curly bra
154
177
{expression}
155
178
```
156
179
180
+
When using {expression} inside markup, Svelte automatically converts the value to a string before rendering it. The conversion follows JavaScript's standard behavior:
181
+
182
+
- Primitive values (number, boolean, string) are directly converted to strings.
183
+
- Objects call their .toString() method (if not overridden, it defaults to [object Object]).
184
+
- undefined and null are treated as empty strings ("").
Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `{`, `{`, or `{` for `{` and `}`, `}`, or `}` for `}`.
158
201
159
202
If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
0 commit comments