ok finally both refs and selected properties for template type checki…

…ng working as expected, by intersecting the custom element class with the DefineComponent type. Ugly, but it works.

examples/kitchen-sink-vue/src/App.vue

@@ -3,17 +3,17 @@ import './KitchenSink.js'
 import {useTemplateRef} from 'vue'
 
 const sink = useTemplateRef('sink')
-sink.value!.foo
+
+sink.value!.someMethod()
+sink.value!.foo = 123
 </script>
 
 <template>
-	<!-- There should be a type error here: -->
-	<kitchen-sink ref="sink" :foo="true"></kitchen-sink>
+	<!-- There should be no type errors: -->
+	<kitchen-sink ref="sink" :foo="123" :bar="true"></kitchen-sink>
+
+	<!-- There should be type errors: -->
+	<kitchen-sink ref="sink" :foo="true" :bar="123"></kitchen-sink>
 </template>
 
-<style scoped>
-kitchen-sink#sink {
-	cursor: pointer;
-	user-select: none;
-}
-</style>
+<style scoped></style>

examples/kitchen-sink-vue/src/KitchenSink.ts

@@ -1,14 +1,29 @@
+import type {DefineComponent} from 'vue'
+
+// Select the properties to expose to template type checking.
+type KitchenSinkAttributes = 'foo' | 'bar'
+
 export class KitchenSink extends HTMLElement {
 	foo = 123
+	bar = false
+
+	// This is not exposed to template type checking.
+	someMethod() {
+		/* ... */
+	}
 }
+
 customElements.define('kitchen-sink', KitchenSink)
 
-import type {Component} from 'vue'
+type VueElementAttribtues<T extends HTMLElement, Attributes extends keyof T> =
+	// This is the type that is exposed to template type checking.
+	DefineComponent<Partial<Pick<T, Attributes>>> &
+		// Additionally intersect with a constructor type that returns the element type, for refs to work properly.
+		(new () => T)
 
 declare module 'vue' {
 	interface GlobalComponents {
-		// Try toggling between these two lines
-		'kitchen-sink': typeof KitchenSink // not working (except ref works)
-		// 'kitchen-sink': Component<{foo: number}> // works (except ref not working)
+		// Use the helper to add any custom element to GlobalComponents.
+		'kitchen-sink': VueElementAttribtues<KitchenSink, KitchenSinkAttributes>
 	}
 }