recursal/MDN huggingface dataset:
MediaEncryptedEvent: initDataType property
==========================================

The read-only **`initDataType`** property of the `MediaKeyMessageEvent` returns a case-sensitive string describing the type of the initialization data associated with this event.

Value
-----

A string.

Specifications
--------------

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediaencryptedevent-initdatatype |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ViewTransition: skipTransition() method
=======================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`skipTransition()`** method of the
 `ViewTransition` interface skips the animation part of the view transition, but doesn't skip running the `document.startViewTransition()` callback that updates the DOM.

Syntax
------


```js
skipTransition()
```

### Parameters

None.

### Return value

`undefined`.

Examples
--------


```js
// start new view transition
const transition = document.startViewTransition(() => displayNewImage());

// skip the animation and just update the DOM
transition.skipTransition();
```

Specifications
--------------

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-skiptransition |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Smooth and simple transitions with the View Transitions API
ViewTransition: ready property
==============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`ready`** read-only property of the
 `ViewTransition` interface is a `Promise` that fulfills once the pseudo-element tree is created and the transition animation is about to start.

`ready` will reject if the transition cannot begin. This can be due to misconfiguration, for example duplicate `view-transition-name`s, or if the callback passed to `Document.startViewTransition()` throws or returns a promise that rejects.

Value
-----

A promise.

Examples
--------

In the following example, `ready` is used to trigger a custom circular reveal view transition emanating from the position of the user's cursor on click, with animation provided by the Web Animations API.


```js
// Store the last click event
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don’t support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // Create a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root’s new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // Specify which pseudo-element to animate
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}
```


This animation also requires the following CSS, to turn off the default CSS animation and stop the old and new view states from blending in any way (the new state "wipes" right over the top of the old state, rather than transitioning in):


```css
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-ready |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Smooth and simple transitions with the View Transitions API
ViewTransition: finished property
=================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`finished`** read-only property of the
 `ViewTransition` interface is a `Promise` that fulfills once the transition animation is finished, and the new page view is visible and interactive to the user.

`finished` only rejects if the callback passed to `document.startViewTransition()`throws or returns a promise that rejects, which indicates that the new state of the page wasn't created.

If a transition animation fails to start, or is skipped during the animation using `ViewTransition.skipTransition()`, the end state is still reached therefore `finished` still fulfills.

Value
-----

A promise.

Examples
--------

### Different transitions for different navigations

Sometimes certain navigations will require specifically tailored transitions, for example a 'back' navigation may want a different transition to a 'forward' navigation. The best way to handle such cases is to set a class name on the `<html>` element, handle the transition — applying the correct animation using a tailored selector — and then remove the class name once the transition is finished.


```js
async function handleTransition() {
  if (isBackNavigation) {
    document.documentElement.classList.add("back-transition");
  }

  const transition = document.startViewTransition(() =>
    updateTheDOMSomehow(data),
  );

  try {
    await transition.finished;
  } finally {
    document.documentElement.classList.remove("back-transition");
  }
}
```


**Note:** `isBackNavigation` isn't a built-in feature; it's a theoretical function that could perhaps be implemented using the Navigation API or similar.

Specifications
--------------

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-finished |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Smooth and simple transitions with the View Transitions API
ViewTransition: updateCallbackDone property
===========================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`updateCallbackDone`** read-only property of the
 `ViewTransition` interface is a `Promise` that fulfills when the promise returned by the `document.startViewTransition()`'s callback fulfills, or rejects when it rejects.

`updateCallbackDone` is useful when you don't care about the success/failure of the transition animation, and just want to know if and when the DOM is updated.

Value
-----

A promise.

Examples
--------


```js
// start new view transition
const transition = document.startViewTransition(() => displayNewImage());

transition.updateCallbackDone.then(() => {
  // Respond to the DOM being updated successfully
});
```


See Transitions as an enhancement for a useful example.

Specifications
--------------

| Specification |
| --- |
| CSS View Transitions Module Level 1 # dom-viewtransition-updatecallbackdone |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Smooth and simple transitions with the View Transitions API
Navigation: navigateerror event
===============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`navigateerror`** event of the `Navigation` interface is fired when a navigation fails.

For example, if the network is down, any `fetch()` method invoked to handle a navigation will fail, and the error will be routed to `navigateerror`.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("navigateerror", (event) => {});

onnavigateerror = (event) => {};
```

Event type
----------

An `ErrorEvent`. Inherits from `Event`.

Event

ErrorEventExamples
--------

You might deal with a successful navigation by hiding a previously displayed progress indicator, like this:


```js
navigation.addEventListener("navigatesuccess", (event) => {
  loadingIndicator.hidden = true;
});
```


Or you might show an error message on failure:


```js
navigation.addEventListener("navigateerror", (event) => {
  loadingIndicator.hidden = true; // also hide indicator
  showMessage(`Failed to load page: ${event.message}`);
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-navigateerror |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
Navigation: currententrychange event
====================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`currententrychange`** event of the `Navigation` interface is fired when the `Navigation.currentEntry` has changed.

This event will fire for:

* Same-document navigations (e.g. `back()` or `traverseTo()`).
* Replacements (i.e. a `navigate()` call with `history` set to `replace`).
* Other calls that change the entry's state (e.g. `updateCurrentEntry()`, or the History API's `History.replaceState()`).

This event fires after the navigation is committed, meaning that the visible URL has changed and the `NavigationHistoryEntry` update has occurred. It is useful for migrating from usage of older API features like the `hashchange` or `popstate` events.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("currententrychange", (event) => {});

oncurrententrychange = (event) => {};
```

Event type
----------

A `NavigationCurrentEntryChangeEvent`. Inherits from `Event`.

Event

NavigationCurrentEntryChangeEventExamples
--------

Navigation data reporting:


```js
navigation.addEventListener("currententrychange", () => {
  const data = navigation.currentEntry.getState();
  submitAnalyticsData(data.analytics);
});
```


Setting up a per-entry event:


```js
navigation.addEventListener("currententrychange", () => {
  navigation.currentEntry.addEventListener("dispose", genericDisposeHandler);
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-currententrychange |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
Navigation: canGoForward property
=================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`canGoForward`** read-only property of the
 `Navigation` interface returns `true` if it is possible to navigate forwards in the navigation history
 (i.e. the `currentEntry` is not the last one in the history entry list),
 and `false` if it is not.

Value
-----

A boolean value: `true` if it is possible to navigate forwards in the navigation history, `false` otherwise.

Examples
--------


```js
async function backHandler() {
  if (navigation.canGoBack) {
    await navigation.back().finished;
    // Handle any required clean-up after
    // navigation has finished
  } else {
    displayBanner("You are on the first page");
  }
}

async function forwardHandler() {
  if (navigation.canGoForward) {
    await navigation.forward().finished;
    // Handle any required clean-up after
    // navigation has finished
  } else {
    displayBanner("You are on the last page");
  }
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-navigation-cangoforward-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
Navigation: navigatesuccess event
=================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`navigatesuccess`** event of the `Navigation` interface is fired when a successful navigation has finished.

In the case of an intercepted navigation, this would occur after any promises returned by your `intercept()` handler are fulfilled. The `NavigationTransition.finished` promise will also fulfill at the same time.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("navigatesuccess", (event) => {});

onnavigatesuccess = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

You might deal with a successful navigation by hiding a previously displayed progress indicator, like this:


```js
navigation.addEventListener("navigatesuccess", (event) => {
  loadingIndicator.hidden = true;
});
```


Or you might show an error message on failure:


```js
navigation.addEventListener("navigateerror", (event) => {
  loadingIndicator.hidden = true; // also hide indicator
  showMessage(`Failed to load page: ${event.message}`);
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # event-navigatesuccess |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
Navigation: entries() method
============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`entries()`** method of the
 `Navigation` interface returns an array of `NavigationHistoryEntry` objects representing all existing history entries.

Syntax
------


```js
entries()
```

### Parameters

None.

### Return value

An array of `NavigationHistoryEntry` objects.

### Exceptions

None.

Examples
--------

### Return the number of entries in the history


```js
let numOfEntries = navigation.entries().length - 1;
```

### A smart back button

A page-supplied "back" button can take you back, even after reload, by inspecting the previous history entries:


```js
backButtonEl.addEventListener("click", () => {
  if (
    navigation.entries()[navigation.currentEntry.index - 1]?.url ===
    "/product-listing"
  ) {
    navigation.back();
  } else {
    // If the user arrived here in some other way
    // e.g. by typing the URL directly:
    navigation.navigate("/product-listing", { history: "replace" });
  }
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-navigation-entries-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
Navigation: reload() method
===========================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`reload()`** method of the
 `Navigation` interface reloads the current URL, updating any provided state in the history entries list.

Syntax
------


```js
navigate(options)
```

### Parameters

`options` Optional

An options object containing the following properties:

`state` Optional

Developer-defined information to be stored in the associated `NavigationHistoryEntry` once the navigation is complete, retrievable via `getState()`. This can be any data type. You might, for example, wish to store a page visit count for analytics purposes, or store UI state details so the view can be shown exactly as the user last left it. Any data stored in `state` must be structured-cloneable.

`info` Optional

Developer-defined information to be passed along to the `navigate` event, made available in `NavigateEvent.info`. This can be any data type. You might, for example, wish to display newly-navigated content with a different animation depending on how it was navigated to (swipe left, swipe right, or go home). A string indicating which animation to use could be passed in as `info`.


### Return value

An object with the following properties:

`committed`

A `Promise` which will fulfill when the visible URL has changed and a new `NavigationHistoryEntry` has been created.

`finished`

A `Promise` which will fulfill when all promises returned by the `intercept()` handler are fulfilled. This is equivalent to the `NavigationTransition.finished` promise fulfilling, when the `navigatesuccess` event fires.

Either one of these promises rejects if the navigation has failed for some reason.

### Exceptions

`DataCloneError` `DOMException`

Thrown if the `state` parameter had values included in it that are not structured-cloneable.

Examples
--------

### Using info and state


```js
async function handleReload() {
  await navigation.reload({
    info: { animation: "fade-in" },
    state: { infoPaneOpen: true },
  }).finished;

  // Update application state
  // ...
}
```


Reload page and add a new state item:


```js
async function handleReload() {
  await navigation.reload({
    state: { ...navigation.currentEntry.getState(), newState: 3 },
  }).finished;

  // Update application state
  // ...
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-navigation-reload-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
Navigation: currentEntry property
=================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

 The **`currentEntry`** read-only property of the
 `Navigation` interface returns a `NavigationHistoryEntry` object representing the location the user is currently navigated to right now.

Value
-----

A `NavigationHistoryEntry` object.

Examples
--------


```js
function initHomeBtn() {
  // Get the key of the first loaded entry
  // so the user can always go back to this view.
  const { key } = navigation.currentEntry;
  backToHomeButton.onclick = () => {
    navigation.traverseTo(key);
  };
}
// Intercept navigate events, such as link clicks, and
// replace them with single-page navigations
navigation.addEventListener("navigate", (event) => {
  event.intercept({
    async handler() {
      // Navigate to a different view,
      // but the "home" button will always work.
    },
  });
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-navigation-currententry-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
Navigation: transition property
===============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`transition`** read-only property of the `Navigation` interface returns a `NavigationTransition` object representing the status of an in-progress navigation, which can be used to track it.

Value
-----

A `NavigationTransition` object, or `null` if no navigation is currently in progress.

Examples
--------


```js
async function handleTransition() {
  if (navigation.transition) {
    showLoadingSpinner();
    await navigation.transition.finished;
    hideLoadingSpinner();
  }
}
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-navigation-transition-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo