recursal/MDN huggingface dataset:
TextUpdateEvent: text property
==============================

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

The **`TextUpdateEvent.text`** read-only property contains the text that was inserted within the updated range of a `EditContext`'s `textupdate` event.

Value
-----

A `String` that contains the text that replaces the text contained between the `updateRangeStart` and `updateRangeEnd` indexes.

Examples
--------

### Using `textupdate` to display the inserted text and location


```html
<div id="editor"></div>
```



```js
const editorEl = document.getElementById("editor");
const editContext = new EditContext();
editorEl.editContext = editContext;

editContext.addEventListener("textupdate", (e) => {
  console.log(
    `The user inserted the text "${e.text}" at index ${e.updateRangeStart}.`,
  );
});
```

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

| Specification |
| --- |
| EditContext API # dom-textupdateevent-text |

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

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

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

The **`TextUpdateEvent.selectionEnd`** read-only property indicates the position of the end of the selection (or caret) within the text content of the editable region attached to the `EditContext` object.

Value
-----

A `Number`.

Examples
--------

### Using `textupdate` to render the edited text and user selection

This example shows how to use the `selectionEnd` property to render the selected text within a `textupdate` event handler.


```css
#editor {
  height: 200px;
  background: #eee;
  color: black;
}

.selection {
  display: inline-block;
  vertical-align: bottom;
  background: blue;
  color: white;
  min-width: 2px;
  height: 3ex;
}
```



```html
<div id="editor"></div>
```



```js
const editorEl = document.getElementById("editor");
const editContext = new EditContext();
editorEl.editContext = editContext;

editContext.addEventListener("textupdate", (e) => {
  // Clear the current content.
  editorEl.innerHTML = "";

  const text = editContext.text;
  const { selectionStart, selectionEnd } = e;

  // Render the text before the selection.
  const textBefore = document.createElement("span");
  textBefore.textContent = text.substring(0, selectionStart);

  // Render the selected text, or caret.
  const textSelected = document.createElement("span");
  textSelected.classList.add("selection");
  textSelected.textContent = text.substring(selectionStart, selectionEnd);

  // Render the text after the selection.
  const textAfter = document.createElement("span");
  textAfter.textContent = text.substring(selectionEnd);

  editorEl.appendChild(textBefore);
  editorEl.appendChild(textSelected);
  editorEl.appendChild(textAfter);

  console.log(`Text before selection: ${textBefore.textContent}`);
  console.log(`Selected text: ${textSelected.textContent}`);
  console.log(`Text after selection: ${textAfter.textContent}`);
});
```

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

| Specification |
| --- |
| EditContext API # dom-textupdateevent-selectionend |

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

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

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

The **`TextUpdateEvent.selectionStart`** read-only property indicates the position of the end of the selection (or caret) within the text content of the editable region attached to the `EditContext` object.

Value
-----

A `Number`.

Examples
--------

### Using `textupdate` to render the edited text and user selection

This example shows how to use the `selectionStart` property to render the selected text within a `textupdate` event handler.


```css
#editor {
  height: 200px;
  background: #eee;
  color: black;
}

.selection {
  display: inline-block;
  vertical-align: bottom;
  background: blue;
  color: white;
  min-width: 2px;
  height: 3ex;
}
```



```html
<div id="editor"></div>
```



```js
const editorEl = document.getElementById("editor");
const editContext = new EditContext();
editorEl.editContext = editContext;

editContext.addEventListener("textupdate", (e) => {
  // Clear the current content.
  editorEl.innerHTML = "";

  const text = editContext.text;
  const { selectionStart, selectionEnd } = e;

  // Render the text before the selection.
  const textBefore = document.createElement("span");
  textBefore.textContent = text.substring(0, selectionStart);

  // Render the selected text, or caret.
  const textSelected = document.createElement("span");
  textSelected.classList.add("selection");
  textSelected.textContent = text.substring(selectionStart, selectionEnd);

  // Render the text after the selection.
  const textAfter = document.createElement("span");
  textAfter.textContent = text.substring(selectionEnd);

  editorEl.appendChild(textBefore);
  editorEl.appendChild(textSelected);
  editorEl.appendChild(textAfter);

  console.log(`Text before selection: ${textBefore.textContent}`);
  console.log(`Selected text: ${textSelected.textContent}`);
  console.log(`Text after selection: ${textAfter.textContent}`);
});
```

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

| Specification |
| --- |
| EditContext API # dom-textupdateevent-selectionstart |

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

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

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

The **`TextUpdateEvent.updateRangeEnd`** read-only property indicates the end position of the text range that is being replaced in the `EditContext` object.

Value
-----

A `Number`.

Examples
--------

### Using `textupdate` to display the inserted text and location


```html
<div id="editor"></div>
```



```js
const editorEl = document.getElementById("editor");
const editContext = new EditContext();
editorEl.editContext = editContext;

editContext.addEventListener("textupdate", (e) => {
  console.log(
    `The user inserted the text "${e.text}" between index ${e.updateRangeStart} and index ${e.updateRangeEnd}.`,
  );
});
```

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

| Specification |
| --- |
| EditContext API # dom-textupdateevent-updaterangeend |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TextUpdateEvent: TextUpdateEvent() constructor
==============================================

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

The **`TextUpdateEvent()`** constructor returns a new `TextUpdateEvent` object.

Syntax
------


```js
new TextUpdateEvent(type)
new TextUpdateEvent(type, options)
```

### Parameters

`type`

A string representing the type of the event. Possible values: `"textupdate"`.

`options` Optional

An optional object with the following properties:

`updateRangeStart`

A number representing the offset of the first character within the editable region text that needs to be updated.

`updateRangeEnd`

A number representing the offset of the last character within the editable region text that needs to be updated.

`text`

A string representing the text that needs to be inserted or deleted.

`selectionStart`

A number representing the offset of the selection start within the editable region text.

`selectionEnd`

A number representing the offset of the selection end within the editable region text.

`compositionStart`

A number representing the offset of the start of the composition within the editable region text.

`compositionEnd`

A number representing the offset of the end of the composition within the editable region text.


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

| Specification |
| --- |
| EditContext API # dom-textupdateevent-constructor |

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

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

See also
--------

* The `TextUpdateEvent` interface it belongs to.
WorkletSharedStorage: keys() method
===================================

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

 The **`keys()`** method of the
 `WorkletSharedStorage` interface returns an async iterator, which contains the keys for each item in a `WorkletSharedStorage` instance.

Syntax
------


```js
keys()
```

### Parameters

None.

### Return value

An array of the `WorkletSharedStorage`'s enumerable property keys.

### Exceptions

`TypeError`

Thrown if the calling site does not have the Shared Storage API included in a successful privacy sandbox enrollment process.

Examples
--------


```js
// keys() available inside a shared storage worklet module
const storage = await this.sharedStorage;

async function logKeys() {
  for await (const key of storage.keys()) {
    console.log(key);
  }
}
```

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

| Specification |
| --- |
| Shared Storage API # worklet-shared-storage |

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

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

See also
--------

* Shared Storage API
WorkletSharedStorage: length() method
=====================================

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

 The **`length()`** method of the
 `WorkletSharedStorage` interface returns the number of entries currently stored in shared storage for the current origin.

Syntax
------


```js
length()
```

### Parameters

None.

### Return value

A `Promise` that fulfills with a number, which represents the total count of key-value pairs currently in the shared storage.

### Exceptions

`TypeError`

Thrown if:

* The worklet module has not yet been added with `addModule()`.
* The calling site does not have the Shared Storage API included in a successful privacy sandbox enrollment process.
* The browser fails to retrieve the number of entries for some other reason.

Examples
--------


```js
// length() available inside a shared storage worklet module

async function retrieveLength() {
  const length = await this.sharedStorage.length();
  console.log(length);
}
```

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

| Specification |
| --- |
| Shared Storage API # dom-workletsharedstorage-length |

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

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

See also
--------

* Shared Storage API
WorkletSharedStorage: entries() method
======================================

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

 The **`entries()`** method of the
 `WorkletSharedStorage` interface returns an async iterator. The iterator provides an array of `[key, value]` pairs corresponding to the enumerable properties of a `WorkletSharedStorage` instance. The order of these pairs is similar to that in a `for...in` loop, though a `for...in` loop also enumerates properties from the prototype chain.

Syntax
------


```js
entries()
```

### Parameters

None.

### Return value

An array of the `WorkletSharedStorage`'s enumerable property key-value pairs.

### Exceptions

`TypeError`

Thrown if the calling site does not have the Shared Storage API included in a successful privacy sandbox enrollment process.

Examples
--------


```js
// entries() available inside a shared storage worklet module
const storage = await this.sharedStorage;

async function logEntries() {
  for await (const [key, value] of storage.entries()) {
    console.log({ key, value });
  }
}
```

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

| Specification |
| --- |
| Shared Storage API # worklet-shared-storage |

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

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

See also
--------

* Shared Storage API
WorkletSharedStorage: context property
======================================

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

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`context`** read-only property of the `WorkletSharedStorage` interface contains contextual data passed into the shared storage worklet from the associated browsing context via the `FencedFrameConfig.setSharedStorageContext()` method.

Value
-----

A string representing the data. The value will match the latest value that was passed into the `FencedFrameConfig.setSharedStorageContext()` method prior to navigation to the `FencedFrameConfig`. If no value was set by `setSharedStorageContext()` prior to navigation, then `context` will return `undefined`.

Examples
--------

See the main `WorkletSharedStorage` page for an example.

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

The `context` property is not currently defined in a specification.

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

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

See also
--------

* Shared Storage API
WorkletSharedStorage: remainingBudget() method
==============================================

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

 The **`remainingBudget()`** method of the
 `WorkletSharedStorage` interface returns the remaining navigation budget for the current origin.

The navigation budget is the number of entropy bits permitted inside a `<fencedframe>` due to the `WindowSharedStorage.selectURL()` calls per origin every 24 hours. This is not the same as the number of navigations; rather, it is based on the number of potential navigations in each call. Each time a `selectURL()` navigation occurs, the corresponding origin's budget decreases by the logarithm (base 2) of the number of URL choices.

Navigation budget is a mechanism designed to limit the rate of leakage of cross-site data to the destination pages navigated to in fenced frames.

Syntax
------


```js
remainingBudget()
```

### Parameters

None.

### Return value

A `Promise` that fulfills with a number representing the remaining navigation budget.

### Exceptions

`TypeError`

Thrown if the worklet module has not yet been added with `addModule()` or if the calling site does not have the Shared Storage API included in a successful privacy sandbox enrollment process.

Examples
--------


```js
// remainingBudget() available inside a shared storage worklet module

async function retrieveBudget() {
  const budget = await this.sharedStorage.remainingBudget();
  console.log(budget);
}
```

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

| Specification |
| --- |
| Shared Storage API # dom-workletsharedstorage-remainingbudget |

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

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

See also
--------

* Shared Storage API
HTMLAllCollection: item() method
================================

The **`item()`** method of the `HTMLAllCollection` interface returns the element located at the specified offset into the collection, or the element with the specified value for its `id` or `name` attribute.

Syntax
------


```js
item(nameOrIndex)
```

### Parameters

`nameOrIndex`

If this parameter is an integer, or a string that can be converted to an integer, then it represents the position of the `Element` to be returned. Elements appear in an `HTMLAllCollection` in the same order in which they appear in the document's source. If the parameter is a string can't be converted to an integer, it will be interpreted as the `name` or `id` of the element to be returned.

### Return value

If `nameOrIndex` represents an index, `item()` returns the `Element` at the specified index, or `null` if `nameOrIndex` is less than zero or greater than or equal to the length property. If `nameOrIndex` represents a name, `item()` returns the same value as `namedItem()`.

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

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

See also
--------

* `HTMLCollection.item()`
HTMLAllCollection: namedItem() method
=====================================

The **`namedItem()`** method of the `HTMLAllCollection` interface returns the first `Element` in the collection whose `id` or `name` attribute matches the specified name, or `null` if no element matches.

Syntax
------


```js
namedItem(name)
```

### Parameters

`name`

A string representing the value of the `id` or `name` attribute of the element we are looking for.

### Return value

The first `Element` in the `HTMLAllCollection` matching the `name`, or `null`, if there are none.

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

| Specification |
| --- |
| HTML Standard # dom-htmlallcollection-nameditem |

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

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

See also
--------

* `HTMLAllCollection.namedItem()`
HTMLAllCollection: length property
==================================

The **`HTMLAllCollection.length`** property returns the number of items in this `HTMLAllCollection`.

Value
-----

An integer value representing the number of items in this `HTMLAllCollection`.

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

| Specification |
| --- |
| HTML Standard # dom-htmlallcollection-length |

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

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

See also
--------

* `HTMLCollection.length`
SharedStorageSelectURLOperation: run() method
=============================================

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

The **`run()`** method of the `SharedStorageSelectURLOperation` interface defines the structure to which the `run()` method defined inside a URL Selection output gate operation should conform.

Syntax
------


```js
run(urls, data)
```

### Parameters

`urls`

An array of objects representing the URLs to be chosen by the URL Selection operation. Each object contains two properties:

`url`

A string representing the URL.

`reportingMetadata` Optional

An object containing properties where names are event types and values are URLs pointing to reporting destinations, for example `"click" : "my-reports/report1.html"`. The URLs act as destinations for reports submitted with a destination of type `"shared-storage-select-url"`, typically submitted via a `Fence.reportEvent()` or `Fence.setReportEventDataForAutomaticBeacons()` method call.


`data`

An object representing any data required for executing the operation.

### Return value

A `Promise` that fulfills with a number defining the array index of the URL selected by the operation.

Examples
--------

See the main `SharedStorageSelectURLOperation` page for an example.

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

| Specification |
| --- |
| Shared Storage API # dom-sharedstorageselecturloperation-run |

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

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

See also
--------

* Shared Storage API
WritableStreamDefaultController: error() method
===============================================

 The **`error()`** method of the
 `WritableStreamDefaultController` interface causes any future interactions
 with the associated stream to error.

 This method is rarely used, since usually it suffices to return a rejected promise from
 one of the underlying sink's methods. However, it can be useful for suddenly shutting
 down a stream in response to an event outside the normal lifecycle of interactions with
 the underlying sink.

Syntax
------


```js
error(message)
```

### Parameters

`message`

 A string representing the error you want future interactions to
 fail with.


### Return value

None (`undefined`).

### Exceptions

`TypeError`

The stream you are trying to error is not a `WritableStream`.

Examples
--------


```js
const writableStream = new WritableStream({
  start(controller) {
    // do stuff with controller

    // error stream if necessary
    controller.error("My error is broken");
  },
  write(chunk, controller) {
    // ...
  },
  close(controller) {
    // ...
  },
  abort(err) {
    // ...
  },
});
```

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

| Specification |
| --- |
| Streams Standard # ref-for-ws-default-controller-error① |

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

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

The read-only **`signal`** property of the `WritableStreamDefaultController` interface returns the `AbortSignal` associated with the controller.

Value
-----

An `AbortSignal` object.

Examples
--------

### Aborting a long write operation

In this example, we simulate a slow operation using a local sink: We do nothing when some data is written but to wait for a second. This gives us enough time to call the `writer.abort()` method and to immediately reject the promise.


```js
const writingStream = new WritableStream({
  // Define the slow local sink to simulate a long operation
  write(controller) {
    return new Promise((resolve, reject) => {
      controller.signal.addEventListener("abort", () =>
        reject(controller.signal.reason),
      );

      // Do nothing but wait with the data: it is a local sink
      setTimeout(resolve, 1000); // Timeout to simulate a slow operation
    });
  },
});

// Perform the write
const writer = writingStream.getWriter();
writer.write("Lorem ipsum test data");

// Abort the write manually
await writer.abort("Manual abort!");
```

### Transferring the `AbortSignal` to the underlying layer

In this example, we use the Fetch API to actually send the message to a server. The Fetch API also support `AbortSignal`: It is possible to use the same object for both the `fetch` method and the `WritableStreamDefaultController`.


```js
const endpoint = "https://www.example.com/api"; // Fake URL for example purpose
const writingStream = new WritableStream({
  async write(chunk, controller) {
    // Write to the server using the Fetch API
    const response = await fetch(endpoint, {
      signal: controller.signal, // We use the same object for both fetch and controller
      method: "POST",
      body: chunk,
    });
    await response.text();
  },
});

// Perform the write
const writer = writingStream.getWriter();
writer.write("Lorem ipsum test data");

// Abort the write manually
await writer.abort("Manual abort!");
```

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

| Specification |
| --- |
| Streams Standard # ref-for-ws-default-controller-signal① |

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

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