# headingLevelFallback

> Why JS: recovering an ambient level across an independently-hydrated island requires reading the DOM, which pure components cannot do.

```ts
import { headingLevelFallback } from "@sdxc/ui/mixins";
```

Safety net for an independently-hydrated island whose root didn't get its
ambient level threaded in as a `level` prop. Detects the nearest
ancestor's resolved level and reports it through `options.onLevel`.

## Signature

```ts
headingLevelFallback(options: HeadingLevelFallback.Options): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for an island's outermost `HeadingScope` or `Heading` root's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options` | `HeadingLevelFallback.Options` | Callback the recovered level is reported through; see HeadingLevelFallback.Options. |

## Examples

```tsx
// An island whose root is a HeadingScope wrapping further content.
function CommentsIsland(handle: Handle) {
	let level: HeadingLevel | undefined;

	return () => (
		<HeadingScope
			level={level}
			mix={[
				headingLevelFallback({
					onLevel(detected) {
						level = detected;
						handle.update();
					},
				}),
			]}
		>
			<Heading>Comments</Heading>
		</HeadingScope>
	);
}
```

```tsx
// An island whose root is a lone Heading.
function SectionTitleIsland(handle: Handle) {
	let level: HeadingLevel | undefined;

	return () => (
		<Heading
			level={level}
			mix={[
				headingLevelFallback({
					onLevel(detected) {
						level = detected;
						handle.update();
					},
				}),
			]}
		>
			Related articles
		</Heading>
	);
}
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### HeadingLevelFallback.Options

Configuration accepted by headingLevelFallback.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `onLevel` | `(level: HeadingLevel) => void` | Called once, on attach, with the ancestor level clamped to the native `1`–`6` range. Never called when no ancestor carries HEADING_LEVEL_ATTRIBUTE or its value is unparsable. |