activeElement

activeElement provides reactive access to the currently focused DOM element in your application, similar to document.activeElement but with reactive updates.

• Updates synchronously with DOM focus changes
• Returns null when no element is focused
• Safe to use with SSR (Server-Side Rendering)
• Lightweight alternative to manual focus tracking

If you need to provide a custom document / shadowRoot, you can use the useActiveElement utility instead, which provides a more flexible API.

Demo

Usage

		<script lang="ts">
	import { activeElement } from "runed";
</script>
 
<p>
	Currently active element:
	{activeElement.current?.localName ?? "No active element found"}
</p>
	

Type Definition

		interface ActiveElement {
	readonly current: Element | null;
}