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

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 **`slotchange`** event is fired on an `HTMLSlotElement` instance (`<slot>` element) when the node(s) contained in that slot change.

**Note:** the `slotchange` event doesn't fire if the children of a slotted node change — only if you change (e.g. add or delete) the actual nodes themselves.

In order to trigger a **slotchange** event, one has to set or remove the `slot` attribute.

This event is not cancelable.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------


```js
element.setAttribute("slot", slotName);
// element.assignedSlot = $slot
element.removeAttribute("slot");
// element.assignedSlot = null
```


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 `<slot>`s, then add a `slotchange` event listener to the template's second slot — which is the one which has 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 |
| --- |
| DOM Standard # eventdef-htmlslotelement-slotchange |
| HTML Standard # handler-onslotchange |

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

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

See also
--------

`HTMLSlotElement`
HTMLProgressElement: labels property
====================================

 The **`HTMLProgressElement.labels`** read-only property returns
 a `NodeList` of the `<label>` elements associated with the
 `<progress>` element.

Value
-----

 A `NodeList` containing the `<label>` elements associated
 with the `<progress>` element.

Examples
--------

### HTML


```html
<label id="label1" for="test">Label 1</label>
<progress id="test" value="70" max="100">70%</progress>
<label id="label2" for="test">Label 2</label>
```

### JavaScript


```js
window.addEventListener("DOMContentLoaded", () => {
  const progress = document.getElementById("test");
  for (const label of progress.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

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

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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

The **`ChannelMergerNode()`** constructor creates a new `ChannelMergerNode` object instance.

Syntax
------


```js
new ChannelMergerNode(context)
new ChannelMergerNode(context, options)
```

### Parameters

`context`

A `BaseAudioContext` representing the audio context you want the node to be associated with.

`options` Optional

An object defining the properties you want the `ChannelMergerNode` to have:

`numberOfInputs` Optional

A number defining the number of inputs the `ChannelMergerNode` should have. If not specified, the default value used is 6.

`channelCount` Optional

 An integer used to determine how many channels are used when up-mixing and down-mixing connections to any inputs to the node.
 (See `AudioNode.channelCount` for more information.)
 Its usage and precise definition depend on the value of `channelCountMode`.


`channelCountMode` Optional

 A string describing the way channels must be matched between
 the node's inputs and outputs. (See `AudioNode.channelCountMode` for more
 information including default values.)


`channelInterpretation` Optional

 A string describing the meaning of the channels.
 This interpretation will define how audio
 up-mixing and down-mixing will happen.
 The possible values are `"speakers"` or `"discrete"`.
 (See `AudioNode.channelCountMode` for more information including default values.)



### Return value

A new `ChannelMergerNode` object instance.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if an option such as `channelCount` or `channelCountMode` has been given an invalid value.

Examples
--------


```js
const ac = new AudioContext();

const options = {
  numberOfInputs: 2,
};

const myMerger = new ChannelMergerNode(ac, options);
```

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

| Specification |
| --- |
| Web Audio API # dom-channelmergernode-constructor-channelmergernode |

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

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

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The **`length`** read-only property of the
 `CSSValueList` interface represents the number of `CSSValue`s
 in the list. The range of valid values of the indices is `0` to
 `length-1` inclusive.


**Note:** This property was part of an attempt to create a typed CSS Object Model. This attempt has been abandoned, and most browsers do
 not implement it.


To achieve your purpose, you can use:

* the untyped CSS Object Model, widely supported, or
* the modern CSS Typed Object Model API, less supported and considered experimental.

Value
-----

An `unsigned long` representing the number of `CSSValue`s.

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

 This feature was originally defined in the DOM Style Level 2 specification, but has been dropped from any
 standardization effort since then.

It has been superseded by a modern, but incompatible, CSS Typed Object Model API that is now on the standard track.

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

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

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The **`item()`** method of the `CSSValueList`
 interface is used to retrieve a `CSSValue` by ordinal index.

 The order in this collection represents the order of the values in the CSS style
 property. If the index is greater than or equal to the number of values in the list,
 this method returns `null`.


**Note:** This method was part of an attempt to create a typed CSS Object Model. This attempt has been abandoned, and most browsers do
 not implement it.


To achieve your purpose, you can use:

* the untyped CSS Object Model, widely supported, or
* the modern CSS Typed Object Model API, less supported and considered experimental.

Syntax
------


```js
item(index)
```

### Parameters

`index`

 An `unsigned long` representing the index of the CSS value within the
 collection.


### Return value

 A `CSSValue` object at the `index` position in the
 `CSSValueList`, or `null` if that is not a valid index.

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

 This feature was originally defined in the DOM Style Level 2 specification, but has been dropped from any
 standardization effort since then.

It has been superseded by a modern, but incompatible, CSS Typed Object Model API that is now on the standard track.

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

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

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

The **`angularAcceleration`** read-only property of the `GamepadPose` interface returns an array representing the angular acceleration vector of the `Gamepad`, in meters per second per second.

In other words, the current acceleration of the sensor's rotation around the `x`, `y`, and `z` axes.

Value
-----

A `Float32Array`, or `null` if the gamepad is not able to provide angular acceleration information.

Examples
--------

TBD

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

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-angularacceleration |

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

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

See also
--------

* WebVR API
* Gamepad API
GamepadPose: linearVelocity property
====================================

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

The **`linearVelocity`** read-only property of the `GamepadPose` interface returns an array representing the linear velocity vector of the `Gamepad`, in meters per second.

In other words, the current velocity at which the sensor is moving along the `x`, `y`, and `z` axes.

Value
-----

A `Float32Array`, or `null` if the gamepad is not able to provide linear velocity data.

Examples
--------

TBD

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

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-linearvelocity |

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

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

See also
--------

* WebVR API
* Gamepad API
GamepadPose: linearAcceleration property
========================================

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

The **`linearAcceleration`** read-only property of the `GamepadPose` interface returns an array representing the linear acceleration vector of the `Gamepad`, in meters per second per second.

In other words, the current acceleration of the sensor, along the `x`, `y`, and `z` axes.

Value
-----

A `Float32Array`, or `null` if the gamepad is not able to provide linear acceleration data.

Examples
--------

TBD

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

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-linearacceleration |

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

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

See also
--------

* WebVR API
* Gamepad API
GamepadPose: position property
==============================

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

The **`position`** read-only property of the `GamepadPose` interface returns the position of the `Gamepad` as a 3D vector.

The coordinate system is as follows:

* Positive X is to the user's right.
* Positive Y is up.
* Positive Z is behind the user.

Positions are measured in meters from an origin point — this point is the position the sensor was first read at.

Value
-----

A `Float32Array`, or `null` if the gamepad is not able to provide position data.

**Note:** User agents may provide emulated position values through certain techniques; when doing so they should still report `GamepadPose.hasPosition` as false.

Examples
--------

TBD

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

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-position |

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

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

See also
--------

* WebVR API
* Gamepad API
GamepadPose: angularVelocity property
=====================================

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

The **`angularVelocity`** read-only property of the `GamepadPose` interface returns an array representing the angular velocity vector of the `Gamepad`, in radians per second.

In other words, the current velocity at which the sensor is rotating around the `x`, `y`, and `z` axes.

Value
-----

A `Float32Array`, or `null` if the gamepad is not able to provide angular velocity information.

Examples
--------

TBD

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

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-angularvelocity |

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

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

See also
--------

* WebVR API
* Gamepad API
GamepadPose: hasPosition property
=================================

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

The **`hasPosition`** read-only property of the `GamepadPose` interface returns a boolean value stating whether the `Gamepad` can track and return position information.

Value
-----

A boolean value.

Examples
--------

TBD

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

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-hasposition |

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

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

See also
--------

* WebVR API
* Gamepad API
GamepadPose: orientation property
=================================

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

The **`orientation`** read-only property of the `GamepadPose` interface returns the orientation of the `Gamepad`, as a quarternion value.

The value is a `Float32Array`, made up of the following values:

* pitch — rotation around the X axis.
* yaw — rotation around the Y axis.
* roll — rotation around the Z axis.
* w — the fourth dimension (usually 1).

The orientation yaw (rotation around the y axis) is relative to the initial yaw of the sensor when it was first read.

Value
-----

A `Float32Array`, or `null` if the VR sensor is not able to provide orientation data.

Examples
--------

TBD

**Note:** An orientation of `{ x: 0, y: 0, z: 0, w: 1 }` is considered to be "forward".

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

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-orientation |

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

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

See also
--------

* WebVR API
* Gamepad API
GamepadPose: hasOrientation property
====================================

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

The **`hasOrientation`** read-only property of the `GamepadPose` interface returns a boolean value stating whether the `Gamepad` can track and return orientation information.

Value
-----

A boolean value.

Examples
--------

TBD

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

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadpose-hasorientation |

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

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

See also
--------

* WebVR API
* Gamepad API
PaymentMethodChangeEvent: methodDetails property
================================================

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

 The read-only **`methodDetails`** property of the `PaymentMethodChangeEvent` interface is an object
 containing any data the payment handler may provide to describe the change the user
 has made to their payment method. The value is `null` if no details
 are available.

Value
-----

 An object containing any data needed to describe the changes made to the payment
 method. The contents vary depending on the actual payment method chosen, so you will
 need to refer to the `methodName`
 property first, then interpret the `methodDetails` after that.

 The default value is `null`, indicating that no additional details are
 available.

Examples
--------

 This example uses the `paymentmethodchange` event to watch for changes to
 the payment method selected for Apple Pay, in order to compute a discount if the user
 chooses to use a Visa card as their payment method.


```js
request.onpaymentmethodchange = (ev) => {
  const { type: cardType } = ev.methodDetails;
  const newStuff = {};
  if (ev.methodName === "https://apple.com/apple-pay") {
    switch (cardType) {
      case "visa": {
        // do Apple Pay specific handling for Visa card…
        // methodDetails contains the card information
        const discount = calculateDiscount(ev.methodDetails);
        Object.assign(newStuff, discount);
        break;
      }
    }
  }
  // finally…
  ev.updateWith(newStuff);
};
const response = await request.show();
```


Note that the `methodDetails` property is being used by the `calculateDiscount()` function to compute any payment discount, then `updateWith()` is called to update the event with the computed update.

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

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentmethodchangeevent-methoddetails |

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

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

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

 The read-only **`methodName`** property of the `PaymentMethodChangeEvent` interface is a string which
 uniquely identifies the payment handler currently selected by the user. The
 payment handler may be a payment technology, such as Apple Pay or Android Pay, and each
 payment handler may support multiple payment methods; changes to the payment method
 within the payment handler are described by the `PaymentMethodChangeEvent`.

Value
-----

 A string which uniquely identifies the currently-selected payment
 handler. This may be a string chosen from the list of standardized payment method
 identifiers, or a URL used by the payment processing service. See
 Payment method identifiers for more information.

The default value is the empty string, `""`.

Examples
--------

 This example uses the `paymentmethodchange` event to watch for changes to
 the payment method selected for Apple Pay, in order to compute a discount if the user
 chooses to use a Visa card as their payment method.


```js
request.onpaymentmethodchange = (ev) => {
  const { type: cardType } = ev.methodDetails;
  const newStuff = {};
  if (ev.methodName === "https://apple.com/apple-pay") {
    switch (cardType) {
      case "visa": {
        // do Apple Pay specific handling for Visa card…
        // methodDetails contains the card information
        const discount = calculateDiscount(ev.methodDetails);
        Object.assign(newStuff, discount);
        break;
      }
    }
  }
  // finally…
  ev.updateWith(newStuff);
};
const response = await request.show();
```


Note that the `methodDetails` property is being used by the `calculateDiscount()` function to compute any payment discount, then `updateWith()` is called to update the event with the computed update.

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

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentmethodchangeevent-methodname |

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

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

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

 The **`PaymentMethodChangeEvent()`**
 constructor creates a new `PaymentMethodChangeEvent` object providing
 details about a `paymentmethodchange` event.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `paymentmethodchange`.


`options` Optional

 An object that, *in addition of the properties defined in `Event()`*,
 can have the following properties:


`methodName` Optional

 A string containing the payment method identifier for the
 payment handler being used. This is an empty string by default.


`methodDetails` Optional

 An object providing payment method-specific information describing the changes
 made to the payment, or `null` if there is no additional information
 available or required. This is `null` by default.



### Return value

 A new `PaymentMethodChangeEvent` object describing a change to
 the options specified for the payment method given in the `methodName`
 property.

 The type of the `methodDetails` property depends on the payment method. For
 example, if `methodName` is `https://example.com/pay`, indicating that the
 Example Pay payment method is being used for validation, the shape of `methodDetails`
 is defined by the payment method.

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

| Specification |
| --- |
| Payment Request API 1.1 # dom-paymentmethodchangeevent-constructor |

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

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

See also
--------

* Payment Request API
* Using the Payment Request API
* Payment processing concepts