webcomponents / webcomponents/polyfills

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

Open
#619 1 comment 1 reaction 0 assignees View on GitHub
Focus Area: Standards & Polyfills Type: Bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.