blob: 6ada4b473ab319fa57d83432c321e2d24b22ab87 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<title>Both focusable and unfocusable custom elements can show validation bubbles</title>
<link rel=match href=ElementInternals-reportValidity-bubble-ref.html>
<link rel=help href=https://html.spec.whatwg.org/C/#report-validity-steps>
<unfocusable-custom-element></unfocusable-custom-element>
<script>
class UnfocusableCustomElement 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('unfocusable-custom-element', UnfocusableCustomElement);
document.querySelector('unfocusable-custom-element').reportValidity();
</script>
|
