diff --git a/documentation/docs/03-template-syntax/01-basic-markup.md b/documentation/docs/03-template-syntax/01-basic-markup.md
index feecfe033e63..36adf32b5d69 100644
--- a/documentation/docs/03-template-syntax/01-basic-markup.md
+++ b/documentation/docs/03-template-syntax/01-basic-markup.md
@@ -8,6 +8,14 @@ Markup inside a Svelte component can be thought of as HTML++.
 
 A lowercase tag, like `<div>`, denotes a regular HTML element. A capitalised tag or a tag that uses dot notation, such as `<Widget>` or `<my.stuff>`, indicates a _component_.
 
+Dot notation is resolved when the component is rendered. If any part of the expression can be `null` or `undefined`, guard it first:
+
+```svelte
+{#if Thing?.Item}
+	<Thing.Item />
+{/if}
+```
+
 ```svelte
 <script>
 	import Widget from './Widget.svelte';