tor-browser

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

ElementInternals-reportValidity-bubble-notref.html (854B)

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