How do you inject custom header and footer elements ?

[mdrokz]

Hi, i want to customize the sign in and sign up component to change the header and footer text i dont see any way to do this in the docs is it possible to do it ? currently im doing this by using an set interval like this

<script lang="ts">
	import SignUp from 'clerk-sveltekit/client/SignUp.svelte';

	let clerkFooter: Element | null = null;

	const interval = setInterval(() => {
		let c = document.querySelector('span[data-localization-key="signUp.start.actionText"]');
		if (c) {
			console.log(c);
			clerkFooter = c;
		}
	}, 500);

	$: {
		if (clerkFooter) {
			clerkFooter.innerHTML = `
					<span class="clerk_footer_link">By clicking continue, you agree to our <a class="text-underline" href="">Terms of Service</a> and <a href="">Privacy Policy</a></span>
				`;
			// clerkFooter.
			clearInterval(interval);
		}
	}
</script>

<div class="flex min-h-screen items-center w-3/5 justify-center">
	<!-- <button class=" border border-border" on:click={login}> sign in with Google </button> -->
	<SignUp
		appearance={{
			layout: {
				socialButtonsPlacement: 'bottom'
			},
			elements: {
				formButtonPrimary: {
					backgroundColor: '#16A34A',
					'&:hover': {
						backgroundColor: '#22c55e'
					}
				},
				footer: {
					display: 'flex',
					justifyContent: 'center'
				},
				footerActionLink: {
					display: 'none'
				}
			}
		}}
		redirectUrl="/"
	/>
</div>

Any help would be appreciated thanks!