Skip to content

Commit d3d95fb

Browse files
docs: clarify default prop values, attribute behavior and text expressions
1 parent c4d4349 commit d3d95fb

File tree

2 files changed

+65
-0
lines changed

2 files changed

+65
-0
lines changed

documentation/docs/01-introduction/xx-props.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,28 @@ You can specify a fallback value for a prop. It will be used if the component's
2626
</script>
2727
```
2828

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 -->
48+
49+
```
50+
2951
To get all properties, use rest syntax:
3052

3153
```svelte

documentation/docs/03-template-syntax/01-basic-markup.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,29 @@ When the attribute name and value match (`name={name}`), they can be replaced wi
7272
-->
7373
```
7474
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+
7598
## Component props
7699

77100
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
154177
{expression}
155178
```
156179

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 ("").
185+
186+
```svelte
187+
<script>
188+
let num = 1;
189+
let bool = false;
190+
let obj = { key: "value" };
191+
let empty = undefined;
192+
</script>
193+
194+
<p>{num}</p> <!-- Renders as: <p>1</p> -->
195+
<p>{bool}</p> <!-- Renders as: <p>false</p> -->
196+
<p>{obj}</p> <!-- Renders as: <p>[object Object]</p> -->
197+
<p>{empty}</p> <!-- Renders as: <p></p> (empty string) -->
198+
```
199+
157200
Curly braces can be included in a Svelte template by using their [HTML entity](https://developer.mozilla.org/docs/Glossary/Entity) strings: `&lbrace;`, `&lcub;`, or `&#123;` for `{` and `&rbrace;`, `&rcub;`, or `&#125;` for `}`.
158201

159202
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

Comments
 (0)