Should the “DOM clobbering” note mention the id attribute as well?
#6,076 opened on Oct 16, 2020
Repository metrics
- Stars
- (7,654 stars)
- PR merge metrics
- (Avg merge 42d 18h) (22 merged PRs in 30d)
Description
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: https://github.com/whatwg/html/commit/d661e874760bb1a4fc0634e6f01e5c02b8c8c1fe 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”?