Missing controlsList property in HTMLMediaElement

[trajano]

TypeScript Version: 3.4.0-dev.201xxxxx

Search Terms:

controlsList HTMLMediaElement

Code

const video = $htmlVideoElement as HTMLVideoElement
video.controlsList.value = "nodownload";

Expected behavior:

Works so we can do things as shown https://googlechrome.github.io/samples/media/controlslist.html and as documented by https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList

Actual behavior:

controlsList is not valid for HTMLVideoElement

Playground Link: https://www.typescriptlang.org/play/#src=interface%20HTMLMediaElement%20%7B%0D%0A%20%20%20%20readonly%20controlsList%3A%20DOMTokenList%20%0D%0A%7D%0D%0A%0D%0Aclass%20Greeter%20%7B%0D%0A%20%20%20%20greeting%3A%20string%3B%0D%0A%20%20%20%20constructor(message%3A%20string)%20%7B%0D%0A%20%20%20%20%20%20%20%20this.greeting%20%3D%20message%3B%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20greet()%20%7B%0D%0A%20%20%20%20%20%20%20%20return%20%22Hello%2C%20%22%20%2B%20this.greeting%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%0D%0Alet%20greeter%20%3D%20new%20Greeter(%22world%22)%3B%0D%0A%0D%0Alet%20video%20%3D%20document.createElement('video')%20as%20HTMLVideoElement%3B%0D%0A%0D%0Avideo.controlsList.value%20%3D%20%22nodownload%22%0D%0A%0D%0Adocument.body.appendChild(video)%3B

Related Issues: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/19500

Workaround is to add and let the declarations get merged.

declare global {
  interface HTMLMediaElement {
    readonly controlsList: DOMTokenList 
  }
}

Or add an ambient type file

interface HTMLMediaElement {
    readonly controlsList: DOMTokenList;
}

interface DOMTokenList {
    /**
     * Returns the associated set as string.
     * Can be set, to change the associated attribute.
     */
    value: string;
}

[trajano]

Not really sure how to tell the generator to add it.

[MartinJohns]

It's an experimental API with limited browser support. I'm not sure whether such an API should really be added already, when there's a trivial alternative available (declaration merging).

[trajano]

It may be limited but Chrome which is used by Cordova applications on Android uses it. Eventually Edge will support it via Chromium

[samenick]

Hello. Any updates? It's really annoying what there is no types for this attribute

[MartinJohns]

@samenick It still has limited browser support. TypeScript usually adds these types when they're supported by at least two browser engines.

In the meantime you can still use declaration merging and just provide the type information yourself.

[trajano]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList#browser_compatibility it is supported on Chrome, Edge and Opera

[MartinJohns]

it is supported on Chrome, Edge and Opera

These three browsers all use the same engine.