docs: clarify default prop values, attribute behavior and text expressions

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

@@ -26,6 +26,68 @@ You can specify a fallback value for a prop. It will be used if the component's
 </script>
 ```
 
+> [!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.
+
+```svelte
+<script>
+	let { answer = 3 } = $props();
+</script>
+
+<p>The answer is {answer}</p>
+```
+
+```svelte
+<script>
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested answer={42} /> <!-- answer is set to 42 -->
+<Nested answer={null} /> <!-- answer is set to null (default value is not used)-->
+<Nested /> <!-- answer is set 3 (default value) -->
+<Nested answer={undefined}/> <!-- answer is set 3 (default value) -->
+
+```
+
+Deep nesting refers to having components nested within other components across multiple levels. In this setup, props can be passed from parent to child components through several layers.
+
+```svelte
+<script>
+	let count = 3;
+</script>
+
+<!-- App.svelte -->
+<First {count} />
+```
+
+```svelte
+<script>
+	export let count;
+</script>
+
+<!-- First.svelte -->
+<p>First: {count}</p>
+<Second {count} />
+```
+
+```svelte
+<script>
+	export let count;
+</script>
+
+<!-- Second.svelte -->
+<p>Second: {count}</p>
+<Third {count} />
+```
+
+```svelte
+<script>
+	export let count;
+</script>
+
+<!-- Third.svelte -->
+<p>Third: {count}</p>
+```
+
 To get all properties, use rest syntax:
 
 ```svelte

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

@@ -72,6 +72,29 @@ When the attribute name and value match (`name={name}`), they can be replaced wi
 -->
 ```
 
+When passing null or undefined to an attribute, the attribute is omitted from the rendered HTML.
+
+```svelte
+<script>
+	let someId = undefined;
+	let someClass = null;
+</script>
+
+<div id={someId} class={someClass}>Attributes are not included.</div>
+<!-- The 'id' and 'class' attributes won't be included in the rendered HTML -->
+```
+
+If an empty string ("") is assigned to an attribute, the attribute remains in the HTML but with an empty value.
+
+```svelte
+<script>
+	let emptyClass = ""
+</script>
+
+<div class={emptyClass}>Hello</div>
+<!-- This will render as: <div class="">Hello</div> -->
+```
+
 ## Component props
 
 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,32 @@ A JavaScript expression can be included as text by surrounding it with curly bra
 {expression}
 ```
 
+When using {expression} inside markup, Svelte automatically converts the value to a string before rendering it and makes the expression reactive (similar to wrapping it in $derived). The conversion follows JavaScript's standard behavior:
+
+- Primitive values (number, boolean, string) are directly converted to strings.
+- Objects call their .toString() method (if not overridden, it defaults to [object Object]).
+- Undefined and null are treated as empty strings ("").
+- Expressions using runes ($state, $derived, etc.) maintain their specific reactive behavior.
+
+```svelte
+	let emptyStr = "";
+	let num = 1;
+	let bool = false;
+	let obj = { key: "value" };
+	let objToStr = obj.toString();
+	let empty = undefined;
+	let nul = null;
+
+
+<p>{emptyStr}</p> <!-- Renders as: <p></p> -->
+<p>{num}</p>   <!-- Renders as: <p>1</p> -->
+<p>{bool}</p>  <!-- Renders as: <p>false</p> -->
+<p>{obj}</p>   <!-- Renders as: <p>[object Object]</p> -->
+<p>{objToStr}</p> <!-- Renders as: <p>[object Object]</p> -->
+<p>{empty}</p> <!-- Renders as: <p></p> (empty string) -->
+<p>{nul}</p> <!-- Renders as: <p></p> -->
+```
+
 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 `}`.
 
 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.