Should the “DOM clobbering” note mention the id attribute as well?

[simevidas]

Two years ago, the HTML Standard added a note about the issue of accidentally overriding built-in DOM properties with the name attribute on inputs.

Commit: d661e87
Spec section: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attributes-common-to-form-controls

I have recently noticed that this issue exists with the id attribute as well. The following example is the same example as in the spec, except that I replaced input.name with input.id:

let form = document.createElement("form");
let input = document.createElement("input");
form.appendChild(input);

console.log(form.method);           // => "get"
input.id = "method"; // DOM clobbering occurs here
console.log(form.method === input); // => true

Demo: https://jsbin.com/zehajuh/edit?js,console

This issue happens in all three major browser engines (Chrome, Safari, Firefox).

Should the spec note be updated to say “Avoid using the names of built-in form properties with the name and id content attributes”?

[TimothyGu]

@simevidas Good catch! Do you want to make a pull request to address this?

[mohit-marathe]

@annevk I have made a PR here
#8474 (comment)

[AtharvShinde2004]

Issue Summary:
I have observed an issue where unintentional overrides of built-in DOM properties occur when using the 'id' attribute on form elements, similar to the issue noted with the 'name' attribute [reference to the original issue]. This behavior is consistent across major browsers (Chrome, Safari, Firefox).

Proposed Solution:

1. Developers should avoid using names that conflict with built-in DOM properties when assigning values to the 'id' attribute of form elements.
2. I recommend updating the HTML specification note to explicitly mention both the 'name' and 'id' attributes when advising against using names of built-in form properties. This will help prevent unintentional overrides and improve clarity for developers.

Updated Note in HTML Specification:
Note: Developers should avoid using names of built-in form properties with the 'name' and 'id' content attributes to prevent unintentional overrides of these properties.

Additional Actions:
Encourage educational resources to highlight this best practice and raise awareness among developers about the potential issues associated with using reserved names.

Looking forward to feedback and discussion on this proposal.