Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /custom-elements/form-associated/ElementInternals-reportValidity-delegatesFocus.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Custom element with delegatesFocus in Form should show validation message on focus delegated element</title>
<link rel=mismatch href=ElementInternals-reportValidity-delegatesFocus-notref.html>
<form>
<input-custom-element></input-custom-element>
</form>
<script>
class InputCustomElement extends HTMLElement {
constructor() {
super();
this.attachShadow({
mode: "open",
delegatesFocus: true
});
this.shadowRoot.innerHTML = '<input>';
this.elementInternals = this.attachInternals();
this.elementInternals.setValidity({valueMissing: true}, 'value missing');
}
static get formAssociated() {
return true;
}
}
customElements.define("input-custom-element", InputCustomElement);
document.querySelector("form").reportValidity();
</script>