Missing 'controlsList' Attribute in HTMLVideoElement Type Definition Throws TypeScript Error

[buddyeorl]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.7.0

Current Behavior

When trying to use the controlsList attribute on an <video> element in a Stencil component, TypeScript raises an error indicating that the attribute is not recognized in the VideoHTMLAttributes<HTMLVideoElement> type definition.

Expected Behavior

The <video> element should accept the controlsList attribute without TypeScript throwing an error. This attribute is a standard part of the HTML5 specification, allowing for better control over the user's access to video features like downloading.

System Info

System: node 20.17.0
    Platform: darwin (23.4.0)
   CPU Model: Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz (16 cpus)
    Compiler: pathToComponent/node_modules/@stencil/core/compiler/stencil.js
       Build: 1727982169
     Stencil: 4.22.0 🍲
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

Steps to reproduce:

• Create a Stencil component with a <video> element.
• Attempt to use controlsList="nodownload" as an attribute.
• Observe the TypeScript error as shown above.

  import { Component, h } from '@stencil/core';
  @Component({
    tag: 'video-player',
    shadow: true,
  })
  export class VideoPlayer {
    render() {
      return (
          <video class="video-player" controls autoplay controlsList='nodownload' preload="metadata">
            <source src="https://raw.githubusercontent.com/mdn/learning-area/refs/heads/main/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" type="video/mp4" />
            Your browser does not support the video tag.
          </video>
      );
    }
  }

Currently I'm using this workaround to prevent ts from throwing that error, but would love to have it fix:

        <video class="video-player" controls autoplay {...({ controlsList: 'nodownload' } as any)} preload="metadata">
          <source src="https://raw.githubusercontent.com/mdn/learning-area/refs/heads/main/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>

Code Reproduction URL

n/a

Additional Information

No response

[christian-bromann]

@buddyeorl thank you for filing the issue. Unfortunately our team currently has a lot of competing priorities and we are not sure when we can take a look at this. We would appreciate any support on a potential bug fix. We are happy to help on technical questions.