Open igomezal opened 11 months ago
The polyfill also prevents setting focus on disabled custom elements that explicitly have a tabindex=0
set, which is not browser default behavior.
Use case:
I am creating a menu-item
component with role="menuitem"
. The WCAG spec states that disabled menu items should still be focusable even though disabled. My menu/menu-item component manages menu-item selection with roving tabindex, and applies tabindex=0 even to the menu-items with disabled
applied.
As shown in the lit.dev playground example above, the polyfill prevents disabled elements from receiving focus at all, even when tabindex is present. Native elements will receive focus when disabled tabindex="0"
is applied.
👋 Hello!
I've also come across some obscure behaviour, which seems to be directly related to this. I'm unsure exactly how to reproduce this as a minimal example, but this polyfill setting formAssociated
is breaking the event target in Firefox. When clicking on a native button in an elements shadow DOM, the event.target
seems to be some other distant ancestor host within the internal handler. This only happens in Firefox, with the scoped elements polyfill active. When debugging, specifically returning false
on the polyfill's formAssociated
getter changes the behaviour to be expected.
Unfortunately, I think we're going to have to remove this polyfill entirely because of these unpredictable issues, and specifically go down a route of not scoping anything.… Unless there a chance this issue can be addressed?
Unfortunately, there's not a great fix for this since formAssociated
cannot be changed once set. This means the polyfill's approach of having a single natively defined element for a set of scoped elements doesn't allow a given tag to be either formAssociated
or not. To support formAssociated
elements, the polyfill turns this on for all elements, which causes the problems noted above.
Before loading the polyfill, apply a script like the following. This ensures formAssociated
is always false
unless the given tag name has been explicitly allowed via window.formAssociatedCustomElementTags .add('form-associated-element');
<script>(function() {
window.formAssociatedCustomElementTags = new Set();
const nativeDefine = customElements.define.bind(customElements);
customElements.define = (name, ctor) => {
if (!window.formAssociatedCustomElementTags.has(name)) {
Object.defineProperty(ctor, 'formAssociated', {value: false, configurable: true});
}
nativeDefine(name, ctor);
}
})();</script>
<script src="scoped-custom-element-registry.min.js"></script>
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.https://github.com/webcomponents/polyfills/blob/90cb97f847ce918289dac0978c50dcda0a0afd72/packages/scoped-custom-element-registry/src/scoped-custom-element-registry.js#L217-L220
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/disabledThis is not the only issue detected, other users also seems to find strange behaviours with the polyfill enabled like in the issue https://github.com/webcomponents/polyfills/issues/546
Example
Steps to reproduce
my-element
my-element
to document.body of the previously created index.htmlExpected 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