<!DOCTYPE html>
<body>
<p>Check if a validation bubble is shown</p>
<script>
class MyControl extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals_ = this.attachInternals();
}
get i() { return this.internals_; }
}
customElements.define('my-control', MyControl);
</script>
<my-control title="Please specify four digits." tabindex=0>🆖</my-control>
<script>
const myControl = document.querySelector('my-control');
myControl.i.setValidity({patternMismatch:true}, 'The value does not match to the requested format');
myControl.i.reportValidity();
</script>
<body>
