From 9aadaa5ceab7bee1bb3ccba80fc7cd2d201c1159 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Tue, 18 Jul 2023 17:45:26 +0200
Subject: [PATCH] more detailed example

---
 .../04-compiler-and-api/04-custom-elements-api.md    | 12 ++++++++++++
 1 file changed, 12 insertions(+)

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>
 
 ...