recursal/MDN huggingface dataset:
HTMLSlotElement
===============

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 **`HTMLSlotElement`** interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML `<slot>` element.

EventTarget

Node

Element

HTMLElement

HTMLSlotElementInstance properties
-------------------

*Also inherits properties from its parent interface, `HTMLElement`.*

`HTMLSlotElement.name`

A string used to get and set the slot's name.

Instance methods
----------------

*Also inherits methods from its parent interface, `HTMLElement`.*

`HTMLSlotElement.assign()`

Sets the manually assigned nodes for this slot to the given nodes.

`HTMLSlotElement.assignedNodes()`

Returns a sequence of the nodes assigned to this slot. If the `flatten` option is set to `true`, it returns a sequence of both the nodes assigned to this slot, and the nodes assigned to any other slots that are descendants of this slot. If no assigned nodes are found, it returns the slot's fallback content.

`HTMLSlotElement.assignedElements()`

Returns a sequence of the elements assigned to this slot (and no other nodes). If the `flatten` option is set to `true`, it returns a sequence of both the elements assigned to this slot, and the elements assigned to any other slots that are descendants of this slot. If no assigned elements are found, it returns the slot's fallback content.

Events
------

*Also inherits events from its parent interface, `HTMLElement`.*

Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.

`slotchange`

Fired on an `HTMLSlotElement` instance (`<slot>` element) when the node(s) contained in that slot change.

Examples
--------

The following snippet is taken from our slotchange example (see it live also).


```js
let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});
```


Here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.

Every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.

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

| Specification |
| --- |
| HTML Standard # htmlslotelement |

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

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

The **`ByteLengthQueuingStrategy`** interface of the Streams API provides a built-in byte length queuing strategy that can be used when constructing streams.

Constructor
-----------

`ByteLengthQueuingStrategy()`

Creates a new `ByteLengthQueuingStrategy` object instance.

Instance properties
-------------------

`ByteLengthQueuingStrategy.highWaterMark` Read only 

The total number of bytes that can be contained in the internal queue before backpressure is applied.

Instance methods
----------------

`ByteLengthQueuingStrategy.size()`

Returns the given chunk's `byteLength` property.

Examples
--------


```js
const queueingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1024 });

const readableStream = new ReadableStream(
  {
    start(controller) {
      // …
    },
    pull(controller) {
      // …
    },
    cancel(err) {
      console.log("stream error:", err);
    },
  },
  queueingStrategy,
);

const size = queueingStrategy.size(chunk);
```

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

| Specification |
| --- |
| Streams Standard # blqs-class |

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

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

See also
--------

* Streams API
* Internal queues and queuing strategies
* `ByteLengthQueuingStrategy()` constructor
RTCEncodedAudioFrame
====================

The **`RTCEncodedAudioFrame`** of the WebRTC API represents an encoded audio frame in the WebRTC receiver or sender pipeline, which may be modified using a WebRTC Encoded Transform.

 The interface provides methods and properties to get metadata about the frame, allowing its format and order in the sequence of frames to be determined.
 The `data` property gives access to the encoded frame data as a buffer, which might be encrypted, or otherwise modified by a transform.

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

Instance properties
-------------------

`RTCEncodedAudioFrame.timestamp` Read only 

Returns the timestamp at which sampling of the frame started.

`RTCEncodedAudioFrame.data`

Return a buffer containing the encoded frame data.

Instance methods
----------------

`RTCEncodedAudioFrame.getMetadata()`

Returns the metadata associated with the frame.

Examples
--------

This code snippet shows a handler for the `rtctransform` event in a `Worker` that implements a `TransformStream`, and pipes encoded frames through it from the `event.transformer.readable` to `event.transformer.writable` (`event.transformer` is a `RTCRtpScriptTransformer`, the worker-side counterpart of `RTCRtpScriptTransform`).

 If the tranformer is inserted into an audio stream, the `transform()` method is called with a `RTCEncodedAudioFrame` whenever a new frame is enqueued on `event.transformer.readable`.
 The `transform()` method shows how this might be read, modified using a fictional encryption function, and then enqueued on the controller (this ultimately pipes it through to the `event.transformer.writable`, and then back into the WebRTC pipline).


```js
addEventListener("rtctransform", (event) => {
  const async transform = new TransformStream({
    async transform(encodedFrame, controller) {
      // Reconstruct the original frame.
      const view = new DataView(encodedFrame.data);

      // Construct a new buffer
      const newData = new ArrayBuffer(encodedFrame.data.byteLength);
      const newView = new DataView(newData);

      //Encrypt frame bytes using the encryptFunction() method (not shown)
      for (let i = 0; i < encodedFrame.data.byteLength; ++i) {
        const encryptedByte = encryptFunction(~view.getInt8(i));
        newView.setInt8(i, encryptedByte);
      }

      encodedFrame.data = newData;
      controller.enqueue(encodedFrame);
    },
  });
  event.transformer.readable
    .pipeThrough(transform)
    .pipeTo(event.transformer.writable);
});
```


Note that more complete examples are provided in Using WebRTC Encoded Transforms.

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

| Specification |
| --- |
| WebRTC Encoded Transform # ref-for-rtcencodedaudioframe%E2%91%A1 |

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

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

See also
--------

* Using WebRTC Encoded Transforms
* `TransformStream`
* `RTCRtpScriptTransformer`
* `RTCEncodedVideoFrame`
MediaKeySystemAccess
====================

The **`MediaKeySystemAccess`** interface of the Encrypted Media Extensions API provides access to a Key System for decryption and/or a content protection provider. You can request an instance of this object using the `Navigator.requestMediaKeySystemAccess()` method.

Instance properties
-------------------

`MediaKeySystemAccess.keySystem` Read only 

Returns a string identifying the key system being used.

Instance methods
----------------

`MediaKeySystemAccess.createMediaKeys()`

Returns a `Promise` that resolves to a new `MediaKeys` object.

`MediaKeySystemAccess.getConfiguration()`

Returns an object with the supported combination of configuration options.

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

| Specification |
| --- |
| Encrypted Media Extensions # mediakeysystemaccess-interface |

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

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

The `XPathEvaluator` interface allows to compile and evaluate XPath expressions.

Constructor
-----------

`XPathEvaluator()`

Creates a new `XPathEvaluator` object.

Instance methods
----------------

`XPathEvaluator.createExpression()`

Creates a parsed XPath expression with resolved namespaces.

`XPathEvaluator.createNSResolver()`

Adapts any DOM node to resolve namespaces allowing the XPath expression to be evaluated relative to the context of the node where it appeared within the document.

`XPathEvaluator.evaluate()`

Evaluates an XPath expression string and returns a result of the specified type if possible.

Example
-------

### Count the number of `<div>` elements

The following example shows the use of the `XPathEvaluator` interface.

#### HTML


```html
<div>XPath example</div>
<div>Number of &lt;div&gt; elements: <output></output></div>
```


#### JavaScript


```js
const xpath = "//div";
const evaluator = new XPathEvaluator();
const expression = evaluator.createExpression(xpath);
const result = expression.evaluate(
  document,
  XPathResult.ORDERED\_NODE\_SNAPSHOT\_TYPE,
);
document.querySelector("output").textContent = result.snapshotLength;
```


#### Result

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

| Specification |
| --- |
| DOM Standard # interface-xpathevaluator |

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

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

See also
--------

* `document.createExpression()`
* `XPathExpression`
SVGFEFloodElement
=================

The **`SVGFEFloodElement`** interface corresponds to the `<feFlood>` element.

EventTarget

Node

Element

SVGElement

SVGFEFloodElementInstance properties
-------------------

*This interface also inherits properties from its parent interface, `SVGElement`.*

`SVGFEFloodElement.height` Read only 

An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.

`SVGFEFloodElement.result` Read only 

An `SVGAnimatedString` corresponding to the `result` attribute of the given element.

`SVGFEFloodElement.width` Read only 

An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.

`SVGFEFloodElement.x` Read only 

An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.

`SVGFEFloodElement.y` Read only 

An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.

Instance methods
----------------

*This interface doesn't implement any specific methods, but inherits methods from its parent interface, `SVGElement`.*

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

| Specification |
| --- |
| Filter Effects Module Level 1 # InterfaceSVGFEFloodElement |

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

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

See also
--------

* `<feFlood>`
HTMLModElement
==============

The **`HTMLModElement`** interface provides special properties (beyond the regular methods and properties available through the `HTMLElement` interface they also have available to them by inheritance) for manipulating modification elements, that is `<del>` and `<ins>`.

EventTarget

Node

Element

HTMLElement

HTMLModElementInstance properties
-------------------

*Inherits properties from its parent, `HTMLElement`.*

`HTMLModElement.cite`

A string reflecting the `cite` HTML attribute, containing a URI of a resource explaining the change.

`HTMLModElement.dateTime`

A string reflecting the `datetime` HTML attribute, containing a date-and-time string representing a timestamp for the change.

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

| Specification |
| --- |
| HTML Standard # htmlmodelement |

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

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

See also
--------

* HTML elements implementing this interface: `<ins>`, `<del>`.
GPUBuffer
=========

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

The **`GPUBuffer`** interface of the WebGPU API represents a block of memory that can be used to store raw data to use in GPU operations.

A `GPUBuffer` object instance is created using the `GPUDevice.createBuffer()` method.

Instance properties
-------------------

`label` 
Experimental

 A string providing a label that can be used to identify the object, for example in
 `GPUError` messages or console warnings.


`mapState` 
Experimental
 Read only 

An enumerated value representing the mapped state of the `GPUBuffer`.

`size` 
Experimental
 Read only 

A number representing the length of the `GPUBuffer`'s memory allocation, in bytes.

`usage` 
Experimental
 Read only 

The bitwise flags representing the allowed usages of the `GPUBuffer`.

Instance methods
----------------

`destroy()` 
Experimental

Destroys the `GPUBuffer`.

`getMappedRange()` 
Experimental

Returns an `ArrayBuffer` containing the mapped contents of the `GPUBuffer` in the specified range.

`mapAsync()` 
Experimental

Maps the specified range of the `GPUBuffer`. Returns a `Promise` that resolves when the `GPUBuffer`'s content is ready to be accessed with `GPUBuffer.getMappedRange()`.

`unmap()` 
Experimental

Unmaps the mapped range of the `GPUBuffer`, making its contents available for use by the GPU again.

Examples
--------

In our basic compute demo, we create an output buffer to read GPU calculations to, and a staging buffer to be mapped for JavaScript access.


```js
const output = device.createBuffer({
  size: BUFFER\_SIZE,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY\_SRC,
});

const stagingBuffer = device.createBuffer({
  size: BUFFER\_SIZE,
  usage: GPUBufferUsage.MAP\_READ | GPUBufferUsage.COPY\_DST,
});
```


Later on, once the `stagingBuffer` contains the results of the GPU computation, a combination of `GPUBuffer` methods are used to read the data back to JavaScript so that it can then be logged to the console:

* `GPUBuffer.mapAsync()` is used to map the `GPUBuffer` for reading.
* `GPUBuffer.getMappedRange()` is used to return an `ArrayBuffer` containing the `GPUBuffer`'s contents.
* `GPUBuffer.unmap()` is used to unmap the `GPUBuffer` again, once we have read the content into JavaScript as needed.


```js
// map staging buffer to read results back to JS
await stagingBuffer.mapAsync(
  GPUMapMode.READ,
  0, // Offset
  BUFFER\_SIZE, // Length
);

const copyArrayBuffer = stagingBuffer.getMappedRange(0, BUFFER\_SIZE);
const data = copyArrayBuffer.slice(0);
stagingBuffer.unmap();
console.log(new Float32Array(data));
```

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

| Specification |
| --- |
| WebGPU # gpubuffer |

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

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

See also
--------

* The WebGPU API
SVGFECompositeElement
=====================

The **`SVGFECompositeElement`** interface corresponds to the `<feComposite>` element.

EventTarget

Node

Element

SVGElement

SVGFECompositeElementConstants
---------

| Name | Value | Description |
| --- | --- | --- |
| `SVG_FECOMPOSITE_OPERATOR_UNKNOWN` | 0 | 
 The type is not one of predefined types. It is invalid to attempt to
 define a new value of this type or to attempt to switch an existing
 value to this type.
  |
| `SVG_FECOMPOSITE_OPERATOR_OVER` | 1 | Corresponds to the `over` value. |
| `SVG_FECOMPOSITE_OPERATOR_IN` | 2 | Corresponds to the `in` value. |
| `SVG_FECOMPOSITE_OPERATOR_OUT` | 3 | Corresponds to `out` value. |
| `SVG_FECOMPOSITE_OPERATOR_ATOP` | 4 | Corresponds to `atop` value. |
| `SVG_FECOMPOSITE_OPERATOR_XOR` | 5 | Corresponds to `xor` value. |
| `SVG_FECOMPOSITE_OPERATOR_ARITHMETIC` | 6 | Corresponds to `arithmetic` value. |

Instance properties
-------------------

*This interface also inherits properties from its parent interface, `SVGElement`.*

`SVGFECompositeElement.height` Read only 

An `SVGAnimatedLength` corresponding to the `height` attribute of the given element.

`SVGFECompositeElement.in1` Read only 

An `SVGAnimatedString` corresponding to the `in` attribute of the given element.

`SVGFECompositeElement.result` Read only 

An `SVGAnimatedString` corresponding to the `result` attribute of the given element.

`SVGFECompositeElement.type` Read only 

An `SVGAnimatedEnumeration` corresponding to the `type` attribute of the given element. It takes one of the `SVG_FECOMPOSITE_OPERATOR_*` constants defined on this interface.

`SVGFECompositeElement.values` Read only 

An `SVGAnimatedNumberList` corresponding to the `values` attribute of the given element.

`SVGFECompositeElement.width` Read only 

An `SVGAnimatedLength` corresponding to the `width` attribute of the given element.

`SVGFECompositeElement.x` Read only 

An `SVGAnimatedLength` corresponding to the `x` attribute of the given element.

`SVGFECompositeElement.y` Read only 

An `SVGAnimatedLength` corresponding to the `y` attribute of the given element.

Instance methods
----------------

*This interface does not provide any specific methods, but implements those of its parent, `SVGElement`.*

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

| Specification |
| --- |
| Filter Effects Module Level 1 # InterfaceSVGFECompositeElement |

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

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

See also
--------

* `<feComposite>`
XRLightEstimate
===============

**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 **`XRLightEstimate`** interface of the WebXR Device API provides the estimated lighting values for an `XRLightProbe` at the time represented by an `XRFrame`.

To get an `XRLightEstimate` object, call the `XRFrame.getLightEstimate()` method.

Instance properties
-------------------

`XRLightEstimate.primaryLightDirection` Read only  
Experimental

A `DOMPointReadOnly` representing the direction to the primary light source from the `probeSpace` of an `XRLightProbe`.

`XRLightEstimate.primaryLightIntensity` Read only  
Experimental

A `DOMPointReadOnly` (with the `x`, `y`, `z` values mapped to RGB) representing the intensity of the primary light source from the `probeSpace` of an `XRLightProbe`.

`XRLightEstimate.sphericalHarmonicsCoefficients` Read only  
Experimental

A `Float32Array` containing 9 spherical harmonics coefficients.

Instance methods
----------------

None.

Examples
--------

### Getting an `XRLightProbe` object

 First, use the `XRSession.requestLightProbe()` method to get a light probe from a session.
 Then, within an `XRFrame` loop, the `getLightEstimate()` method will return a `XRLightEstimate` object containing the lighting values for each frame.


```js
const lightProbe = await xrSession.requestLightProbe();

// frame loop
function onXRFrame(time, xrFrame) {
  let lightEstimate = xrFrame.getLightEstimate(lightProbe);

  // Use light estimate data to light the scene

  // Available properties
  lightEstimate.sphericalHarmonicsCoefficients;
  lightEstimate.primaryLightDirection;
  lightEstimate.primaryLightIntensity;
}
```

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

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # xrlightestimate-interface |

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

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

See also
--------

* `XRFrame.getLightEstimate()`
HTMLLegendElement
=================

The **`HTMLLegendElement`** is an interface allowing to access properties of the `<legend>` elements. It inherits properties and methods from the `HTMLElement` interface.

EventTarget

Node

Element

HTMLElement

HTMLLegendElementInstance properties
-------------------

*Inherits properties from its parent, `HTMLElement`.*

`HTMLLegendElement.align` 
Deprecated

A string representing the alignment relative to the form set.

`HTMLLegendElement.form` Read only 

A `HTMLFormElement` representing the form that this legend belongs to. If the legend has a fieldset element as its parent, then this attribute returns the same value as the **form** attribute on the parent fieldset element. Otherwise, it returns `null`.

Instance methods
----------------

*No specific method; inherits methods from its parent, `HTMLElement`.*

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

| Specification |
| --- |
| HTML Standard # htmllegendelement |

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

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

See also
--------

* The HTML element implementing this interface: `<legend>`
HTMLDataListElement
===================

The **`HTMLDataListElement`** interface provides special properties (beyond the `HTMLElement` object interface it also has available to it by inheritance) to manipulate `<datalist>` elements and their content.

EventTarget

Node

Element

HTMLElement

HTMLDataListElementInstance properties
-------------------

*Inherits properties from its parent, `HTMLElement`*.

`HTMLDataListElement.options` Read only 

A `HTMLCollection` representing a collection of the contained option elements.

Instance methods
----------------

*No specific method; inherits methods from its parent, `HTMLElement`.*

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

| Specification |
| --- |
| HTML Standard # htmldatalistelement |

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

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

See also
--------

* The HTML element implementing this interface: `<datalist>`
MIDIInput
=========

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

The **`MIDIInput`** interface of the Web MIDI API receives messages from a MIDI input port.

EventTarget

MIDIPort

MIDIInputInstance properties
-------------------

*This interface doesn't implement any specific properties, but inherits properties from `MIDIPort`.*

Instance methods
----------------

*This interface doesn't implement any specific methods, but inherits methods from `MIDIPort`.*

### Events

`midimessage`

Fired when the current port receives a MIDI message.

Examples
--------

In the following example the name of each `MIDIInput` is printed to the console. Then, `midimessage` events are listened for on all input ports. When a message is received the `MIDIMessageEvent.data` property is printed to the console.


```js
inputs.forEach((input) => {
  console.log(input.name); /\* inherited property from MIDIPort \*/
  input.onmidimessage = (message) => {
    console.log(message.data);
  };
});
```

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

| Specification |
| --- |
| Web MIDI API # midiinput-interface |

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

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