tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

ElementInternals-reportValidity-bubble.html (999B)

      1 <!DOCTYPE html>
      2 <title>Both focusable and unfocusable custom elements can show validation bubbles</title>
      3 <link rel=mismatch href=ElementInternals-reportValidity-bubble-notref.html>
      4 <link rel=help href=https://html.spec.whatwg.org/C/#report-validity-steps>
      5 <unfocusable-custom-element></unfocusable-custom-element>
      6 <script>
      7 class UnfocusableCustomElement extends HTMLElement {
      8  constructor() {
      9    super();
     10    this.attachShadow({mode: 'open'});
     11    this.shadowRoot.innerHTML = '<input>';
     12    this.elementInternals = this.attachInternals();
     13    const validationAnchor = this.shadowRoot.querySelector('input');
     14    this.elementInternals.setValidity({valueMissing: true}, 'value missing', validationAnchor);
     15  }
     16 
     17  static get formAssociated() {
     18    return true;
     19  }
     20 
     21  reportValidity() {
     22    this.elementInternals.reportValidity();
     23  }
     24 }
     25 
     26 customElements.define('unfocusable-custom-element', UnfocusableCustomElement);
     27 
     28 document.querySelector('unfocusable-custom-element').reportValidity();
     29 </script>