webcomponents / webcomponents/polyfills
[scoped-custom-elements-polyfill]: HTMLFormControlsCollection overwritten with a version that does not support the iterator protocol
- Dominant language
- HTML
- Stars
- 1.2k
- Forks
- 168
- PR merge metrics
- No merged PRs in 30d
Description
### 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](https://github.com/webcomponents/polyfills/blob/16a0a1e87f67c2604381b904b4edd8cd112e5b04/packages/scoped-custom-element-registry/src/scoped-custom-element-registry.ts#L847-L848) 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:
```html
```
### Steps to reproduce
Without the scoped registry polyfill, this prints all elements contained in this form:
```js
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.
Contributor guide
Assessment
This issue has not been assessed yet.