[scoped-custom-elements-polyfill]: HTMLFormControlsCollection overwritten with a version that does not support the iterator protocol

[lennartbuit]

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

• [x] Chrome
• [x] Firefox
• [x] Edge
• [x] Safari
• [ ] IE 11

I believe all browsers to be affected, but only tested in Chrome.