Description
When loading the scoped elements polyfill, the implementation of HTMLFormElement.elements get replaced with a custom HTMLFormControlsCollection. This implementation lacks an implementation for the iterator protocol, it throws an error instead.
Furthermore, the implementation gets replaced globally. So even in a form that does not have custom elements at all, HTMLFormElement.elements is not iterable.
Example
Consider the following HTML:
<form>
<input name="a" type="text" />
<input name="b" type="text" />
</form>
Steps to reproduce
Without the scoped registry polyfill, this prints all elements contained in this form:
const formEl = document.querySelector("form");
for (const el of formEl.elements) {
console.log(el);
} Loading the polyfill prior to looping over the form elements throws an error on the for/of iteration.
Expected behavior
No error is thrown and we can iterate over the elements in a form.
Actual behavior
An error is thrown.
Version
@webcomponents/scoped-custom-element-registry: 0.0.10
Browsers affected
I believe all browsers to be affected, but only tested in Chrome.
Description
When loading the scoped elements polyfill, the implementation of
HTMLFormElement.elementsget replaced with a customHTMLFormControlsCollection. This implementation lacks an implementation for the iterator protocol, it throws an error instead.Furthermore, the implementation gets replaced globally. So even in a form that does not have custom elements at all,
HTMLFormElement.elementsis not iterable.Example
Consider the following HTML:
Steps to reproduce
Without the scoped registry polyfill, this prints all elements contained in this form:
Loading the polyfill prior to looping over the form elements throws an error on the for/of iteration.
Expected behavior
No error is thrown and we can iterate over the elements in a form.
Actual behavior
An error is thrown.
Version
@webcomponents/scoped-custom-element-registry: 0.0.10Browsers affected
I believe all browsers to be affected, but only tested in Chrome.