Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>Both focusable and unfocusable custom elements can show validation bubbles</title>
<focusable-custom-element tabindex="0"></focusable-custom-element>
<script>
class FocusableCustomElement extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = '<input>';
this.elementInternals = this.attachInternals();
const validationAnchor = this.shadowRoot.querySelector('input');
this.elementInternals.setValidity({valueMissing: true}, 'value missing', validationAnchor);
}
static get formAssociated() {
return true;
}
reportValidity() {
this.elementInternals.reportValidity();
}
}
customElements.define('focusable-custom-element', FocusableCustomElement);
</script>