diff --git a/documentation/docs/04-compiler-and-api/04-custom-elements-api.md b/documentation/docs/04-compiler-and-api/04-custom-elements-api.md
index b120687ef7..04afc89d10 100644
--- a/documentation/docs/04-compiler-and-api/04-custom-elements-api.md
+++ b/documentation/docs/04-compiler-and-api/04-custom-elements-api.md
@@ -87,6 +87,7 @@ When constructing a custom element, you can tailor several aspects by defining `
 			name: { reflect: true, type: 'Number', attribute: 'element-index' }
 		},
 		extend: (customElementConstructor) => {
+			// Extend the class so we can let it participate in HTML forms
 			return class extends customElementConstructor {
 				static formAssociated = true;
 
@@ -94,6 +95,13 @@ When constructing a custom element, you can tailor several aspects by defining `
 					super();
 					this.attachedInternals = this.attachInternals();
 				}
+
+				// Add the function here, not below in the component so that
+				// it's always available, not just when the inner Svelte component
+				// is mounted
+				randomIndex() {
+					this.elementIndex = Math.random();
+				}
 			};
 		}
 	}}
@@ -102,6 +110,10 @@ When constructing a custom element, you can tailor several aspects by defining `
 <script>
 	export let elementIndex;
 	export let attachedInternals;
+	// ...
+	function check() {
+		attachedInternals.checkValidity();
+	}
 </script>
 
 ...