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

2.17.1

Current Behavior

In my render function, I created a checkbox:

<label htmlFor={this.id}>My Label Text</label> <input type="checkbox" id={this.id}></input> 

When the component renders, "htmlFor" becomes "htmlfor" and the "My Label Text" does not toggle the checkbox.

Expected Behavior

In my render function, when "htmlFor" is added to a checkbox, that is the attribute (with case) that should render. When the component renders, I also expect that when the "My Label Text" label is clicked, the checkbox is toggled.

Steps to Reproduce

1. Create a checkbox in a render function with the following label/input setup:

<label htmlFor={this.id}>My Label Text</label> <input type="checkbox" id={this.id}></input> 

2. When the component renders, click the label
3. Notice the checkbox does not toggle

Code Reproduction URL

Additional Information

I noticed in the stencil-public-runtime.ts file that there is an htmlfor element property on the LabelHTMLAttributes interface which is not correct:

 interface LabelHTMLAttributes<T> extends HTMLAttributes<T> { form?: string; htmlFor?: string; htmlfor?: string; }