add static method for element internals formAssociated property

src/compiler/compile/Component.ts

@@ -45,6 +45,7 @@ interface ComponentOptions {
 	immutable?: boolean;
 	accessors?: boolean;
 	preserveWhitespace?: boolean;
+	elementInternals?: boolean;
 }
 
 const regex_leading_directory_separator = /^[/\\]/;
@@ -1570,6 +1571,17 @@ function process_component_options(component: Component, nodes) {
 						break;
 					}
 
+					case 'elementInternals': {
+						const value = get_value(attribute, compiler_errors.invalid_attribute_value(name));
+
+						if (typeof value !== 'boolean') {
+							return component.error(attribute, compiler_errors.invalid_attribute_value(name));
+						}
+
+						component_options.elementInternals = value;
+						break;
+					}
+
 					case 'namespace': {
 						const ns = get_value(attribute, compiler_errors.invalid_namespace_attribute);
 

src/compiler/compile/compiler_errors.ts

@@ -224,7 +224,7 @@ export default {
 	},
 	invalid_options_attribute: {
 		code: 'invalid-options-attribute',
-		message: "<svelte:options> can only have static 'tag', 'namespace', 'accessors', 'immutable' and 'preserveWhitespace' attributes"
+		message: "<svelte:options> can only have static 'tag', 'namespace', 'accessors', 'immutable', 'preserveWhitespace' and 'elementInternals' attributes"
 	},
 	css_invalid_global: {
 		code: 'css-invalid-global',

src/compiler/compile/index.ts

@@ -32,7 +32,8 @@ const valid_options = [
 	'loopGuardTimeout',
 	'preserveComments',
 	'preserveWhitespace',
-	'cssHash'
+	'cssHash',
+	'elementInternals'
 ];
 
 const valid_css_values = [

src/compiler/compile/render_dom/index.ts

@@ -553,6 +553,16 @@ export default function dom(
 			}
 		`[0] as ClassDeclaration;
 
+		if (component.component_options.elementInternals) {
+			declaration.body.body.push({
+				type: "PropertyDefinition",
+				static: true,
+				computed: false,
+				key: { type: "Identifier", name: "formAssociated" },
+				value: x`true`,
+			});
+		}
+
 		if (props.length > 0) {
 			declaration.body.body.push({
 				type: 'MethodDefinition',

src/compiler/interfaces.ts

@@ -179,6 +179,7 @@ export interface CompileOptions {
 	legacy?: boolean;
 	customElement?: boolean;
 	tag?: string;
+	elementInternals?: boolean;
 	css?: 'injected' | 'external' | 'none' | boolean;
 	loopGuardTimeout?: number;
 	namespace?: string;

src/runtime/internal/lifecycle.ts

@@ -154,3 +154,23 @@ export function bubble(component, event) {
 		callbacks.slice().forEach(fn => fn.call(this, event));
 	}
 }
+
+// Element internals not in TS3.x.x
+declare global {
+	// eslint-disable-next-line
+	interface ElementInternals {}
+	interface HTMLElement {
+		attachInternals(): ElementInternals;
+	}
+}
+
+/**
+ * Creates element internals for Web Components to participate in forms.
+ */
+export function createCustomElementInternals(): ElementInternals {
+	const component = get_current_component();
+	if (!(component instanceof HTMLElement)) {
+		throw ReferenceError('NotHTMLElement');
+	}
+	return component.attachInternals();
+}