recursal/MDN huggingface dataset:
ShadowRoot: styleSheets property
================================

 The **`styleSheets`** read-only property of the `ShadowRoot` interface
 returns a `StyleSheetList` of `CSSStyleSheet` objects, for stylesheets explicitly linked into or embedded in a shadow tree.

Value
-----

A `StyleSheetList` of `CSSStyleSheet` objects.

Examples
--------


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let styleSheets = shadow.styleSheets;
```

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # dom-documentorshadowroot-stylesheets |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ShadowRoot: fullscreenElement property
======================================

 The **`fullscreenElement`** read-only property of the
 `ShadowRoot` interface returns the element within the shadow tree that is currently displayed in full screen.

Value
-----

 The `Element` which is currently is displayed in full screen mode,
 or `null` if there is no full screen element.

Examples
--------


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let fullscreenElem = shadow.fullscreenElement;
```

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

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-document-fullscreenelement② |

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

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

See also
--------

* `Document.fullscreenElement`
ShadowRoot: getAnimations() method
==================================

 The **`getAnimations()`** method of the `ShadowRoot` interface
 returns an array of all `Animation` objects currently in effect whose
 target elements are descendants of the shadow tree. This array includes CSS Animations, CSS Transitions, and Web Animations.

Syntax
------


```js
getAnimations()
```

### Parameters

None.

### Return value

 An `Array` of `Animation` objects, each representing one
 animation currently associated with elements which are descendants of the
 `ShadowRoot` on which it's called.

Examples
--------

 The following code snippet will slow down all animations in a shadow tree by halving their
 `Animation.playbackRate`.


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
shadow.getAnimations().forEach((animation) => {
  animation.playbackRate \*= 0.5;
});
```

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

| Specification |
| --- |
| Web Animations # dom-documentorshadowroot-getanimations |

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

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

See also
--------

* Web Animations API
* CSS Animations
* CSS Transitions
* `Element.getAnimations()` - Fetch only the animations on a single
 `Element` and its descendants.
* `Animation`
ShadowRoot: pointerLockElement property
=======================================

 The **`pointerLockElement`** read-only property of the `ShadowRoot` interface provides the element set as the target for mouse events while the pointer is locked.
 It is `null` if lock is pending, pointer is unlocked, or the target is in another tree.

Value
-----

An `Element` or `null`.

Examples
--------


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let pleElem = shadow.pointerLockElement;
```

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

| Specification |
| --- |
| Pointer Lock 2.0 # dom-documentorshadowroot-pointerlockelement |

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

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

See also
--------

* `Document.exitPointerLock()`
* `Element.requestPointerLock()`
* Pointer Lock
ShadowRoot: host property
=========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback

 The **`host`** read-only property of
 the `ShadowRoot` returns a reference to the DOM element the
 `ShadowRoot` is attached to.

Value
-----

A DOM `Element`.

Examples
--------


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;

// ...

// return the original host element some time later
let hostElem = shadow.host;
```

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

| Specification |
| --- |
| DOM Standard # dom-shadowroot-host |

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

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

See also
--------

* `part` and `exportparts` HTML attributes
* `<template>` and `<slot>` HTML elements
* `:host`, `:host()`, and `:host-context()` CSS pseudo-classes
* `::part` and `::slotted` CSS pseudo-elements
ShadowRoot: pictureInPictureElement property
============================================

 The **`pictureInPictureElement`** read-only property of the
 `ShadowRoot` interface returns the `Element` that is currently being
 presented in picture-in-picture mode in this shadow tree, or `null` if
 picture-in-picture mode is not currently in use.

Value
-----

 A reference to the `Element` object that's currently in
 picture-in-picture mode, or, if picture-in-picture mode isn't currently in use by the
 shadow tree, the returned value is `null`.

Examples
--------


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let pipElem = shadow.pictureInPictureElement;
```

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

| Specification |
| --- |
| Picture-in-Picture # ref-for-dom-documentorshadowroot-pictureinpictureelement①⑤ |

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

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

See also
--------

* `Document.pictureInPictureElement`
ShadowRoot: mode property
=========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback

 The **`mode`** read-only property of the `ShadowRoot`
 specifies its mode — either `open` or `closed`. This defines
 whether or not the shadow root's internal features are accessible from JavaScript.

 When the `mode` of a shadow root is "`closed`", the shadow root's
 implementation internals are inaccessible and unchangeable from JavaScript—in the same
 way the implementation internals of, for example, the `<video>` element
 are inaccessible and unchangeable from JavaScript.

Value
-----

 A value defined in the
 `ShadowRootMode`
 enum — either `open` or `closed`.

Examples
--------


```js
// We create a closed shadow root, that is not accessible
let element = document.createElement("div");
element.attachShadow({ mode: "closed" });
element.shadowRoot; // null as the shadow root is closed

// We create an open shadow root, that is accessible
let element2 = document.createElement("div");
element2.attachShadow({ mode: "open" });
console.log(`The shadow is ${element2.shadowRoot.mode}`); // logs "The shadow is open"
element2.shadowRoot.textContent("Opened shadow"); // The shadow is open, we can access it from outside
```

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

| Specification |
| --- |
| DOM Standard # dom-shadowroot-mode |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
GPUDeviceLostInfo: reason property
==================================

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

 The **`reason`** read-only property of the
 `GPUDeviceLostInfo` interface defines the reason the device was lost in a machine-readable way.

Value
-----

An enumerated value. At the moment the only value defined in the spec is `"destroyed"`, which indicates that the device was destroyed by a call to `GPUDevice.destroy()`.

If the device was lost because of an unknown reason not covered in the available enumerated values, `reason` returns `undefined`.

Examples
--------

See the main `GPUDevice.lost` page for an example.

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

| Specification |
| --- |
| WebGPU # dom-gpudevicelostinfo-reason |

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

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

See also
--------

* The WebGPU API
GPUDeviceLostInfo: message property
===================================

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

 The **`message`** read-only property of the
 `GPUDeviceLostInfo` interface provides a human-readable message that explains why the device was lost.

Value
-----

A string.

Examples
--------

See the main `GPUDevice.lost` page for an example.

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

| Specification |
| --- |
| WebGPU # dom-gpudevicelostinfo-message |

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

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

See also
--------

* The WebGPU API
DataTransferItem: getAsFileSystemHandle() method
================================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

 The **`getAsFileSystemHandle()`** method of the
 `DataTransferItem` interface returns a `FileSystemFileHandle`
 if the dragged item is a file, or a `FileSystemDirectoryHandle` if the
 dragged item is a directory.

Syntax
------


```js
getAsFileSystemHandle()
```

### Parameters

None.

### Return value

A `Promise`.

If the item's `kind` property is `"file"`, and this item is accessed in the `dragstart` or `drop` event handlers, then the returned promise is fulfilled with a `FileSystemFileHandle` if the dragged item is a file or a `FileSystemDirectoryHandle` if the dragged item is a directory.

Otherwise, the promise fulfills with `null`.

### Exceptions

None.

Examples
--------

 This example uses the `getAsFileSystemHandle` method to return
 `file handles` for dropped items.


```js
elem.addEventListener("dragover", (e) => {
  // Prevent navigation.
  e.preventDefault();
});
elem.addEventListener("drop", async (e) => {
  // Prevent navigation.
  e.preventDefault();

  // Process all of the items.
  for (const item of e.dataTransfer.items) {
    // kind will be 'file' for file/directory entries.
    if (item.kind === "file") {
      const entry = await item.getAsFileSystemHandle();
      if (entry.kind === "file") {
        // run code for if entry is a file
      } else if (entry.kind === "directory") {
        // run code for is entry is a directory
      }
    }
  }
});
```

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

| Specification |
| --- |
| File System Access # dom-datatransferitem-getasfilesystemhandle |

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

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

See also
--------

* File System API
* The File System Access API: simplifying access to local files
DataTransferItem: type property
===============================

 The read-only **`DataTransferItem.type`** property returns the type (format) of the `DataTransferItem` object representing the drag data item.
 The `type` is a Unicode string generally given by a MIME type, although a MIME type is not required.

Some example types are: `text/plain` and `text/html`.

Value
-----

A string representing the drag data item's type.

Examples
--------

This example shows the use of the `type` property.


```js
function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  for (let i = 0; i < data.length; i += 1) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      console.log("… Drop: HTML");
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      console.log("… Drop: URI");
    } else if (data[i].kind === "file" && data[i].type.match("^image/")) {
      // Drag data item is an image file
      const f = data[i].getAsFile();
      console.log("… Drop: File");
    }
  }
}
```

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

| Specification |
| --- |
| HTML Standard # dom-datatransferitem-type-dev |

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

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

See also
--------

* `DataTransfer.types()`
* List of common MIME types
DataTransferItem: kind property
===============================

The read-only **`DataTransferItem.kind`** property returns the kind–a string or a file–of the `DataTransferItem` object representing the *drag data item*.

Value
-----

 A string representing the drag data item's kind.
 It must be one of the following values:

`'file'`

If the drag data item is a file.

`'string'`

If the kind of drag data item is a *plain Unicode string*.

Examples
--------

This example shows the use of the `kind` property.


```js
function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = event.dataTransfer.items;
  for (let i = 0; i < data.length; i += 1) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      console.log("… Drop: HTML");
    } else if (data[i].kind === "file" && data[i].type.match("^image/")) {
      // Drag data item is an image file
      const f = data[i].getAsFile();
      console.log("… Drop: File");
    }
  }
}
```

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

| Specification |
| --- |
| HTML Standard # dom-datatransferitem-kind-dev |

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

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

See also
--------

* Drag and drop
* Drag Operations
* Recommended Drag Types
* DataTransfer test - Paste or Drag
DataTransferItem: getAsString() method
======================================

The **`DataTransferItem.getAsString()`** method invokes the given callback with the drag data item's string data as the argument if the item's `kind` is a *Plain unicode string* (i.e. `kind` is `string`).

Syntax
------


```js
getAsString(callbackFn)
```

### Parameters

`callbackFn`

A callback function that receives following arguments:

`data`

The `data transfer item's` string data.


### Return value

None (`undefined`).

Examples
--------

This example shows the use of the `getAsString()` method as an *inline function* in a `drop` event handler.


```js
function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  for (let i = 0; i < data.length; i += 1) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      console.log("… Drop: HTML");
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      console.log("… Drop: URI");
    } else if (data[i].kind === "file" && data[i].type.match("^image/")) {
      // Drag data item is an image file
      const f = data[i].getAsFile();
      console.log("… Drop: File");
    }
  }
}
```

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

| Specification |
| --- |
| HTML Standard # dom-datatransferitem-getasstring-dev |

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

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

See also
--------

* `DataTransfer.getData()`
DataTransferItem: getAsFile() method
====================================

 If the item is a file, the **`DataTransferItem.getAsFile()`** method returns the drag data item's `File` object.
 If the item is not a file, this method returns `null`.

Syntax
------


```js
getAsFile()
```

### Parameters

None.

### Return value

`File`

If the drag data item is a file, a `File` object is returned; otherwise `null` is returned.

Examples
--------

This example shows the use of the `getAsFile()` method in a `drop` event handler.


```js
function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();
  const data = ev.dataTransfer.items;
  for (let i = 0; i < data.length; i += 1) {
    if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
      // This item is the target node
      data[i].getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
      // Drag data item is HTML
      console.log("… Drop: HTML");
    } else if (
      data[i].kind === "string" &&
      data[i].type.match("^text/uri-list")
    ) {
      // Drag data item is URI
      console.log("… Drop: URI");
    } else if (data[i].kind === "file" && data[i].type.match("^image/")) {
      // Drag data item is an image file
      const f = data[i].getAsFile();
      console.log("… Drop: File");
    }
  }
}
```

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

| Specification |
| --- |
| HTML Standard # dom-datatransferitem-getasfile-dev |

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

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

See also
--------

* `DataTransfer.files`
IDBCursor: advance() method
===========================

 The **`advance()`** method of the `IDBCursor`
 interface sets the number of times a cursor should move
 its position forward.

**Note:** This feature is available in Web Workers

Syntax
------


```js
advance(count)
```

### Parameters

`count`

The number of times to move the cursor forward.

### Return value

None (`undefined`).

### Exceptions

This method may raise a `DOMException` of one of the following types:

`TransactionInactiveError` `DOMException`

Thrown if this IDBCursor's transaction is inactive.

`TypeError`

Thrown if the value passed into the `count` parameter was zero or a negative number.

`InvalidStateError` `DOMException`

Thrown if the cursor is currently being iterated or has iterated past its end.

Examples
--------

 In this simple fragment we create a transaction, retrieve an object store, then use a
 cursor to iterate through the records in the object store. Here we use
 `cursor.advance(2)` to jump 2 places forward each time, meaning that only
 every other result will be displayed. `advance()` works in a similar way to
 `IDBCursor.continue`, except that it allows you to jump multiple records at
 a time, not just always go onto the next record.

 Note that in each iteration of the loop, you can grab
 data from the current record under the cursor object using `cursor.value.foo`. For a complete working example, see our IDBCursor example (View the example live).


```js
function advanceResult() {
  list.textContent = "";
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);
      cursor.advance(2);
    } else {
      console.log("Every other entry displayed.");
    }
  };
}
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-advance① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).
IDBCursor: direction property
=============================

 The **`direction`** read-only property of the
 `IDBCursor` interface is a string that returns the
 direction of traversal of the cursor (set using
 `IDBObjectStore.openCursor` for example). See the Values
 section below for possible values.

**Note:** This feature is available in Web Workers

Value
-----

 A string indicating the direction in which the cursor is traversing the data.
 Possible values are:

`next`

This direction causes the cursor to be opened at the start of the source.

`nextunique`

 This direction causes the cursor to be opened at the start of the source.
 For every key with duplicate values, only the first record is yielded.


`prev`

This direction causes the cursor to be opened at the end of the source.

`prevunique`

 This direction causes the cursor to be opened at the end of the source.
 For every key with duplicate values, only the first record is yielded.


Examples
--------

 In this simple fragment we create a transaction, retrieve an object store, then use a
 cursor to iterate through all the records in the object store. Within each iteration we
 log the direction of the cursor, something like this:
```

prev
```


**Note:** we can't change the direction of travel of the cursor using
 the `direction` property, as it is read-only. We specify the direction of
 travel using the 2nd argument of `IDBObjectStore.openCursor`.


 The cursor does not require us to select the data based on a key; we can just grab all
 of it. Also note that in each iteration of the loop, you can grab data from the current
 record under the cursor object using `cursor.value.foo`. For a complete
 working example, see our IDBCursor example (View the example live).


```js
function backwards() {
  list.textContent = "";
  const transaction = db.transaction(["rushAlbumList"], "readonly");
  const objectStore = transaction.objectStore("rushAlbumList");

  objectStore.openCursor(null, "prev").onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.albumTitle}, ${cursor.value.year}`;
      list.appendChild(listItem);

      console.log(cursor.direction);
      cursor.continue();
    } else {
      console.log("Entries displayed backwards.");
    }
  };
}
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-direction① |

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

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).