Description
Description
WebComponents defined with the scoped-custom-element-registry polyfill not receive any click event when they have the disabled attribute set.
The polyfill seems to be setting the formAssociated static getter to all the WebComponents registered with the polyfill enabled which cause all the WebComponents to behave like an input, button, textarea, etc.
As it enables the formAssociated property, it blocks any click from the user when the component is disabled something that should only happen on real form components like button, fieldset , optgroup , option , select, textarea and input as defined in https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
This is not the only issue detected, other users also seems to find strange behaviours with the polyfill enabled like in the issue #546
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://www.unpkg.com/@webcomponents/scoped-custom-element-registry@0.0.9/scoped-custom-element-registry.min.js"></script>
</head>
<body>
<my-custom-webcomponent disabled></my-custom-webcomponent>
<script>
class MyCustomWebComponent extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' })
shadow.innerHTML = '<p>Click here!</p>'
}
connectedCallback() {
this.addEventListener('click', this.alertOnClick);
}
disconnectedCallback() {
this.removeEventListener('click', this.alertOnClick);
}
alertOnClick() {
alert('YOU CLICKED!');
}
}
customElements.define('my-custom-webcomponent', MyCustomWebComponent)
</script>
</body>
</html>Steps to reproduce
- Create an element
my-element - Create and index.html loading the polyfill
- Append
my-elementto document.body of the previously created index.html - Listen to the click event.
- Click on the element and it should work fine
- Now add the disabled attribute to my-element attached to the DOM
- Click again on the element, now it is not dispatching the click event.
Expected behavior
Any element which is not really associated with a form or a form element should be able to behave as a normal WebComponent and not as a form-associated WebComponent
Actual behavior
All the WebComponents are form-associated when the polyfill is loaded
Version
This is issue has been happening from the version 0.0.4 and onwards of the scoped-custom-element-registry polyfill.
Browsers affected
- Chrome
- Firefox
- Edge
- Safari
- IE 11