By default, when you set a Modal inside an HTMLElement, this closest parent is the anchor. This works thanks to an extra DOM element binded inside the Modal component which gets its parent thanks to the .closestParent method.

In the vast majority of cases, you won't notice any performance issues even when using hundreds of Modals with the default anchor system.

But in some cases, if you have a large number of components with Modals, placed at the same time in the DOM, it may be worthwhile to remove the element used to determine the anchor by using the noAnchor property and targeting the desired anchor with binding.

<Modal noAnchor anchor={myAnchor}>My content</Modal>

You can set anchor manualy

<script lang="ts">
	let myButton = $state<HTMLElement>();
</script>

<button bind:this={myButton}>My button</button>
<Modal noAnchor anchor={myButton}>My content</Modal>

And make it switch

<script lang="ts">
	let checked = $state<boolean>(false);
	let button1 = $state<HTMLElement>();
	let button2 = $state<HTMLElement>();
	const bindedButton = $derived(checked ? button2 : button1);
</script>

<button bind:this={button1}>Button One</button>
<button bind:this={button2}>Button Two</button>

<Modal noAnchor anchor={bindedButton}>
	<input type="checkbox" bind:checked />
	<div>Switch anchor</div>
</Modal>