diff --git a/source b/source index 884e5fdfba8..7b14d7ff2d1 100644 --- a/source +++ b/source @@ -3423,6 +3423,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • Fire a progress event named e
  • FormData interface
    • +
  • FormDataEntryValue + type
  • The concept of entry
  • create an entry
    • @@ -42963,6 +42965,7 @@ interface HTMLTableCellElement : HTMLElement {
  • select
  • textarea
  • img
    • +
  • form-associated custom elements

    • The form-associated elements fall into several @@ -42990,6 +42993,7 @@ interface HTMLTableCellElement : HTMLElement {

  • output
  • select
  • textarea
    • +
  • form-associated custom elements
    • @@ -43008,6 +43012,7 @@ interface HTMLTableCellElement : HTMLElement {
  • object
  • select
  • textarea
    • +
  • form-associated custom elements

    • Some submittable elements can be, depending on their @@ -43030,6 +43035,7 @@ interface HTMLTableCellElement : HTMLElement {

  • output
  • select
  • textarea
    • +
  • form-associated custom elements
    • @@ -43068,6 +43074,7 @@ interface HTMLTableCellElement : HTMLElement {
  • progress
  • select
  • textarea
    • +
  • form-associated custom elements
    • @@ -43716,12 +43723,23 @@ interface HTMLLabelElement : HTMLElement { list of label elements, in tree order, whose labeled control is the element in question. The labels IDL attribute of labelable elements and input elements, on getting, + data-x="category-label">labelable elements that are not form-associated custom elements, and the labels IDL attribute of input elements, on getting, must return that NodeList object, and that same value must always be returned, unless this element is an input element whose type attribute is in the Hidden state, in which case it must instead return null.

    +

    Form-associated custom elements don't have + a labels IDL attribute. Instead, their + ElementInternals object has a labels IDL attribute. On getting, it must throw + a "NotSupportedError" DOMException if the target element is not a form-associated custom + element. Otherwise, it must return that NodeList object, and that same value + must always be returned.

    +

    This (non-conforming) example shows what happens to the NodeList and what labels returns when an input element has its HTMLLegendElement : HTMLElement {

    Listed form-associated elements have a form - IDL attribute, which, on getting, must return the element's form owner, or null if - there isn't one.

    + element">form-associated elements except for + form-associated custom elements have a + form IDL attribute, which, on getting, must return + the element's form owner, or null if there isn't one.

    + +

    Form-associated custom elements don't have + form IDL attribute. Instead, their + ElementInternals object has a form IDL attribute. On getting, it must throw a + "NotSupportedError" DOMException if the target element is not a form-associated custom + element. Otherwise, it must return the element's form owner, or null if there + isn't one.

    @@ -53025,9 +53053,10 @@ form.method === input; // => true
      -
    1. The element is a button, input, select, or - textarea element, and the disabled attribute - is specified on this element (regardless of its value).
      2. +
    2. The element is a button, input, select, + textarea, or form-associated custom element, and the disabled attribute is specified on this element (regardless of + its value).
    3. The element is a descendant of a fieldset element whose disabled attribute is specified, and is not a @@ -55501,9 +55530,13 @@ control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldD

      An element can have a custom validity error message defined. Initially, an element must have its custom validity error message set to the empty string. When its value is not the empty string, the element is suffering from a custom error. It can be set - using the setCustomValidity() method. The user - agent should use the custom validity error message when alerting the user to the - problem with the control.

      + using the setCustomValidity() method, except for + form-associated custom elements. Form-associated custom elements can have a + custom validity error message set via their ElementInternals object's + setValidity() method. The user agent should use the + custom validity error message when alerting the user to the problem with the + control.

      An element can be constrained in various ways. The following is the list of validity states that a form control can be in, making the control invalid for the purposes of @@ -55514,64 +55547,119 @@ control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldD

      Suffering from being missing
      -

      When a control has no value but has a required attribute (input required, textarea required); or, more complicated rules for - select elements and controls in radio button - groups, as specified in their sections.

      +
      +

      When a control has no value but has a required attribute (input required, textarea required); or, more complicated rules for + select elements and controls in radio button + groups, as specified in their sections.

      + +

      When the setValidity() method sets + valueMissing flag to true for a + form-associated custom element.

      +
      Suffering from a type mismatch
      -

      When a control that allows arbitrary user input has a value that is not in the correct syntax (E-mail, URL). -

      +
      +

      When a control that allows arbitrary user input has a value that is not in the correct syntax (E-mail, URL). +

      + +

      When the setValidity() method sets + typeMismatch flag to true for a + form-associated custom element.

      +
      Suffering from a pattern mismatch
      -

      When a control has a value that doesn't satisfy the - pattern attribute.

      +
      +

      When a control has a value that doesn't satisfy the + pattern attribute.

      + +

      When the setValidity() method sets + patternMismatch flag to true for a + form-associated custom element.

      +
      Suffering from being too long
      -

      When a control has a value that is too long for the - form control maxlength attribute - (input maxlength, textarea - maxlength).

      +
      +

      When a control has a value that is too long for the + form control maxlength attribute + (input maxlength, textarea + maxlength).

      + +

      When the setValidity() method sets + tooLong flag to true for a + form-associated custom element.

      +
      Suffering from being too short
      -

      When a control has a value that is too short for the - form control minlength attribute - (input minlength, textarea - minlength).

      +
      +

      When a control has a value that is too short for the + form control minlength attribute + (input minlength, textarea + minlength).

      + +

      When the setValidity() method sets + tooShort flag to true for a + form-associated custom element.

      +
      Suffering from an underflow
      -

      When a control has a value that is not the empty - string and is too low for the min attribute.

      +
      +

      When a control has a value that is not the empty + string and is too low for the min attribute.

      + +

      When the setValidity() method sets + rangeUnderflow flag to true for a + form-associated custom element.

      +
      Suffering from an overflow
      -

      When a control has a value that is not the empty - string and is too high for the max attribute.

      +
      +

      When a control has a value that is not the empty + string and is too high for the max attribute.

      + +

      When the setValidity() method sets + rangeOverflow flag to true for a + form-associated custom element.

      +
      Suffering from a step mismatch
      -

      When a control has a value that doesn't fit the - rules given by the step attribute.

      +
      +

      When a control has a value that doesn't fit the + rules given by the step attribute.

      + +

      When the setValidity() method sets + stepMismatch flag to true for a + form-associated custom element.

      +
      Suffering from bad input
      -

      When a control has incomplete input and the user agent does not think the user ought to - be able to submit the form in its current state.

      +
      +

      When a control has incomplete input and the user agent does not think the user ought to + be able to submit the form in its current state.

      + +

      When the setValidity() method sets + badInput flag to true for a form-associated custom element. +

      +
      Suffering from a custom error

      When a control's custom validity error message (as set by the element's - setCustomValidity() method) is not the empty - string.

      + setCustomValidity() method or + ElementInternals's setValidity() method) is + not the empty string.

      @@ -55659,16 +55747,29 @@ control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldD

    4. If the result was positive, then return that result.

      5. -

    5. Report the problems with the constraints of at least one of the elements given in - unhandled invalid controls to the user. User agents may focus one of those elements in - the process, by running the focusing steps for that element, and may change the - scrolling position of the document, or perform some other action that brings the element to the - user's attention. User agents may report more than one constraint violation. User agents may - coalesce related constraint violation reports if appropriate (e.g. if multiple radio buttons in a - group are marked as required, only one error need be - reported). If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script - error.

      6. +
    6. +

      Report the problems with the constraints of at least one of the elements given in + unhandled invalid controls to the user.

      + +
        +

      • User agents may focus one of those elements in the process, by running the + focusing steps for that element, and may change the scrolling position of the + document, or perform some other action that brings the element to the user's attention. For + elements that are form-associated custom + elements, user agents should use their validation + anchor instead, for the purposes of these actions.

        • + +

      • User agents may report more than one constraint violation.

        • + +

      • User agents may coalesce related constraint violation reports if appropriate (e.g. if + multiple radio buttons in a group are marked as + required, only one error need be reported).

        • + +

      • If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script + error.

        • +
      +

    7. Return a negative result.

      8. @@ -55830,6 +55931,14 @@ control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldD otherwise (i.e., false if any conditions are barring it from constraint validation).

      +

      The willValidate attribute + of ElementInternals interface, on getting, must throw a + "NotSupportedError" DOMException if the + target element is not a + form-associated custom element. Otherwise, it must return true if the + target element is a + candidate for constraint validation, and false otherwise.

      +

      The setCustomValidity(message) method, when invoked, must set the custom validity error message to message.

      @@ -55867,6 +55976,14 @@ control.setSelectionRange(oldStart + prefix.length, oldEnd + prefix.length, oldD ValidityState object that represents the validity states of this element. This object is live.

      +

      The validity attribute of + ElementInternals interface, on getting, must throw a + "NotSupportedError" DOMException if the + target element is not a + form-associated custom element. Otherwise, it must return a + ValidityState object that represents the validity states of the + target element. This object is live.

      + 
      [Exposed=Window]
 interface ValidityState {
   readonly attribute boolean valueMissing;
@@ -55921,17 +56038,16 @@ interface ValidityState {
 
   
 
-  
      The checkValidity() method, when
-  invoked, must run these steps:
      
+  
      The check validity steps for an element element are:
      
 
   
        
    
      1. 
-    
        If this element is a candidate for constraint validation and does not satisfy its constraints, then:
        
+    
        If element is a candidate for constraint validation and does not
+    satisfy its constraints, then:
        
 
     
          
      
        1. Fire an event named invalid at this element, with the invalid at element, with the cancelable attribute initialized to true (though canceling
      has no effect).
          2. 
 
@@ -55941,27 +56057,42 @@ interface ValidityState {
    
        2. Return true.
          3. 
   
        
 
-  
        The reportValidity() method, when
-  invoked, must run these steps:
+  
        The checkValidity() method, when
+  invoked, must run the check validity steps on this element.
        
+
+  
        The checkValidity() method
+  of the ElementInternals interface must run these steps:
        
+
+  
          
+   
        1. Let element be this ElementInternals's target element.
          2. 
+
+   
        2. If element is not a form-associated custom element, then throw a
+   "NotSupportedError" DOMException.
          3. 
+
+   
        3. Run the check validity steps on element.
          4. 
+  
        
+
+  
        The report validity steps for an element element are:
        
 
   
          
    
        1. 
-    
          If this element is a candidate for constraint validation and does not satisfy its constraints, then:
+    
          If element is a candidate for constraint validation and does not
+    satisfy its constraints, then:
 
     
            
      
          1. Let report be the result of firing an
-     event named invalid at this element, with the cancelable attribute initialized to true.
            2. 
+     event named invalid at element, with the
+     cancelable attribute initialized to true.
            
 
      
          2. If report is true, then report the problems with the constraints of this
      element to the user. When reporting the problem with the constraints to the user, the user
-     agent may run the focusing steps for this element, and may change the scrolling
-     position of the document, or perform some other action that brings this element to the user's
-     attention. User agents may report more than one constraint violation, if this element suffers
-     from multiple problems at once. If this element is not being rendered, then the
-     user agent may, instead of notifying the user, report the error for the
-     running script.
            
+     agent may run the focusing steps for element, and may change the
+     scrolling position of the document, or perform some other action that brings element
+     to the user's attention. User agents may report more than one constraint violation, if
+     element suffers from multiple problems at once. If element is not
+     being rendered, then the user agent may, instead of notifying the user,
+     report the error for the running script.
            
 
      
          3. Return false.
            4. 
     
          
@@ -55969,6 +56100,22 @@ interface ValidityState {
    
        2. Return true.
          3. 
   
        
 
+  
        The reportValidity() method, when
+  invoked, must run the report validity steps on this element.
        
+
+  
        The reportValidity()
+  method of the ElementInternals interface must run these steps:
        
+
+  
          
+   
        1. Let element be this ElementInternals's target element.
          2. 
+
+   
        2. If element is not a form-associated custom element, then throw a
+   "NotSupportedError" DOMException.
          3. 
+
+   
        3. Run the report validity steps on element.
          4. 
+  
        
+
   
        The validationMessage attribute's
   getter must run these steps:
        
 
@@ -56546,12 +56693,6 @@ fur
        data-x="attr-input-type-radio">Radio Button state and whose checkedness is false.
        2. 
 
-       
      2. The field element is not an input element whose type attribute is in the Image Button state, and either the field element does not have a name attribute
-       specified, or its name attribute's value is the empty
-       string.
        3. 
-
        
      3. The field element is an object element that is not using
        a plugin.
        4. 
       
@@ -56593,6 +56734,15 @@ fur
       
      
      
 
+     
    8. If the field is a form-associated custom element, then perform
+     the entry construction algorithm given
+     field and entry list, then continue.
      9. 
+
+     
    9. If either the field element does not have a
+     name attribute specified, or its
+     name attribute's value is the empty string, then
+     continue.
      10. 
+
      
    10. Let name be the value of the field element's
      name attribute.
      11. 
 
@@ -66231,6 +66381,54 @@ document.body.appendChild(flagIcon)
      flagIcon.country = "jp" document.body.appendChild(flagIcon) +
      Creating a form-associated custom element
      + + + +

      Adding a static formAssociated property, with a true value, makes an + autonomous custom element a form-associated custom element. The + ElementInternals interface helps you to implement functions and properties common + to form control elements.

      + + 
      class MyCheckbox extends HTMLElement {
+  static get formAssociated() { return true; }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this._checked = false;
+    this.addEventListener('click', this._onClick.bind(this));
+  }
+
+  get form() { return this._internals.form; }
+  get name() { return this.getAttribute('name'); }
+  get type() { return this.localName; }
+
+  get checked() { return this._checked; }
+  set checked(flag) {
+    this._checked = !!flag;
+    this._internals.setFormValue(this._checked ? 'on' : null);
+  }
+
+  _onClick(event) {
+    this.checked = !this._checked;
+  }
+}
+customElements.define('my-checkbox', MyCheckbox);
      + +

      You can use the custom element my-checkbox like a built-in + form-associated element. For example, putting it in form or label + associates the my-checkbox element with them, and submitting the + form will send data provided by my-checkbox implementation. +

      + + 
      <form action="..." method="...">
+  <label><my-checkbox name="agreed"></my-checkbox> I read the agreement.</label>
+  <input type="submit">
+</form>
+
      + +
      Creating a customized built-in element
      @@ -66643,6 +66841,10 @@ document.body.append(parent);
      Transparent.
      Content attributes:
      Global attributes, except the is attribute
      +
      form, for form-associated custom elements
      +
      disabled, for form-associated custom elements
      +
      readonly, for form-associated custom elements
      +
      name, for form-associated custom elements
      Any other attribute that has no namespace (see prose).
      DOM interface:
      Supplied by the element's author (inherits from HTMLElement)
      @@ -66666,6 +66868,34 @@ document.body.append(parent);
      +

      An autonomous custom element is called a form-associated custom element + if the element is associated with a custom element definition whose form-associated field is set to + true.

      + +

      The name attribute represents the form-associated + custom element's name. The disabled attribute is + used to make the form-associated custom element non-interactive and to prevent its + submission value from being submitted. The form attribute is used to explicitly associate the + form-associated custom element with its form owner.

      + +

      The readonly attribute of form-associated custom elements specifies that the + element is barred from constraint validation. User agents don't provide any other + behavior for the attribute.

      + +

      Constraint validation: If the readonly attribute is specified on a form-associated + custom element, the element is barred from constraint validation.

      + +

      The reset algorithm for form-associated custom elements is to enqueue + a custom element callback reaction with the element, callback name "formResetCallback", and an empty argument list.

      + +
      +

      A valid custom element name is a sequence of characters name that meets all of the following requirements:

      @@ -66763,10 +66993,13 @@ document.body.append(parent);
      A collection of lifecycle callbacks
      A map, whose four keys are the strings "connectedCallback", - "disconnectedCallback", "adoptedCallback", and - "attributeChangedCallback". The corresponding values are either a Web IDL - Function callback function type value, or null. By default the - value of each entry is null.
      + "disconnectedCallback", "adoptedCallback", + "attributeChangedCallback", + "formAssociatedCallback", + "formDisabledCallback", + "formResetCallback", and "formStateRestoreCallback". + The corresponding values are either a Web IDL Function + callback function type value, or null. By default the value of each entry is null.
      A construction stack
      @@ -66776,6 +67009,12 @@ document.body.append(parent); either an element or an already constructed marker. +
      A form-associated + boolean
      +
      If this is true, user agent treats elements associated to this + custom element definition as form-associated custom elements.
      +
      A disable internals boolean
      Controls attachInternals(). @@ -66956,6 +67195,8 @@ dictionary ElementDefinitionOptions {

    11. Set this CustomElementRegistry's element definition is running flag.

      12. +

    12. Let formAssociated be false.

      13. +

    13. Let disableInternals be false.

    14. Let disableShadow be false. @@ -67027,6 +67268,31 @@ dictionary ElementDefinitionOptions {

    15. Set disableShadow to true if disabledFeaturesSequence contains "shadow".

      16. + +

    16. Let formAssociatedValue be Get( + constructor, "formAssociated"). Rethrow any exceptions.

      17. + +

    17. Set formAssociated to the result of + converting formAssociatedValue to a + boolean. Rethrow any exceptions from the conversion.

      18. + +
    18. +

      If formAssociated is true, for each of + "formAssociatedCallback", "formResetCallback", + "formDisabledCallback", and + "formStateRestoreCallback" callbackName:

      + +
        +

      1. Let callbackValue be Get(prototype, + callbackName). Rethrow any exceptions.

        2. + +

      2. If callbackValue is not undefined, then set the value of the entry in + lifecycleCallbacks with key callbackName to the result of converting callbackValue to the Web IDL + Function callback type. Rethrow any exceptions from the + conversion.

        3. +
      +

    Then, perform the following substep, regardless of whether the above steps threw an exception @@ -67049,7 +67315,9 @@ dictionary ElementDefinitionOptions { data-x="concept-custom-element-definition-observed-attributes">observed attributes observedAttributes, lifecycle callbacks - lifecycleCallbacks, lifecycleCallbacks, + form-associated + formAssociated, disable internals disableInternals, and disable shadow @@ -67320,6 +67588,21 @@ customElements.define("x-foo", class extends HTMLElement { +

  • +

    If element is a form-associated custom element, then:

    +
      +

    1. Reset the form owner of element. If element is + associated with a form element, then + enqueue a custom element callback reaction with element, callback + name "formAssociatedCallback", and « the associated form + ».

      2. + +

    2. If element is disabled, then + enqueue a custom element callback reaction with element, callback name + "formDisabledCallback" and « true ».

      3. +
    +
    • +

  • Set element's custom element state to "custom".

    • @@ -67367,6 +67650,25 @@ customElements.define("x-foo", class extends HTMLElement { data-x="">attributeChangedCallback is called, given the attribute's local name, old value, new value, and namespace as arguments. (An attribute's old or new value is considered to be null when the attribute is added or removed, respectively.)

    + +

  • When the user agent resets the form owner of a + form-associated custom element and doing so changes the form owner, its formAssociatedCallback is called, given the new form owner (or null if no owner) + as an argument.

    • + +

  • When the form owner of a form-associated custom element is reset, its formResetCallback is + called.

    • + +

  • When the disabled state of a + form-associated custom element is changed, its formDisabledCallback is called, given the new state as an + argument.

    • + +

  • When user agent updates a form-associated custom element's value on behalf of + a user, its formStateRestoreCallback is called, given the new value and a + string indicating a reason, "restore" or "autocomplete", as arguments.

    • We call these reactions collectively custom @@ -67639,10 +67941,112 @@ customElements.define("x-foo", class extends HTMLElement { 

    [Exposed=Window]
 interface ElementInternals {
-  
+  // Form-associated custom elements
+
+  void setFormValue((File or USVString or FormData)? value,
+                    optional (File or USVString or FormData)? state);
+
+  readonly attribute HTMLFormElement? form;
+
+  void setValidity(ValidityStateFlags flags,
+                   optional DOMString message,
+                   optional HTMLElement anchor);
+  readonly attribute boolean willValidate;
+  readonly attribute ValidityState validity;
+  readonly attribute DOMString validationMessage;
+  boolean checkValidity();
+  boolean reportValidity();
+
+  readonly attribute NodeList labels;
+};
+
+dictionary ValidityStateFlags {
+  boolean valueMissing = false;
+  boolean typeMismatch = false;
+  boolean patternMismatch = false;
+  boolean tooLong = false;
+  boolean tooShort = false;
+  boolean rangeUnderflow = false;
+  boolean rangeOverflow = false;
+  boolean stepMismatch = false;
+  boolean badInput = false;
+  boolean customError = false;
 };
    - +
    +
    internals . setFormValue(value)
    +
    +

    Sets both the state and + submission value of internals's + target element to value.

    + +

    If value is null, the element won't participate in form submission.

    +
    + +
    internals . setFormValue(value, + state)
    +
    +

    Sets the submission value of + internals's target element to + value, and its state to state.

    + +

    If value is null, the element won't participate in form submission.

    +
    + +
    internals . form
    +

    Returns the form owner of internals's + target element.

    + +
    internals . setValidity(flags, + message [, anchor ])
    +

    Marks internals's target element as + suffering from the constraints indicated by the flags argument, and sets the element's + validation message to message. If anchor is specified, the user agent might + use it to indicate problems with the constraints of internals's target element when the form owner is validated + interactively or reportValidity() is + called.

    + +
    internals . setValidity({})
    +

    Marks internals's target element as + satisfying its constraints.

    + +
    internals . + willValidate
    + +

    Returns true if internals's + target element will be validated when the form is + submitted; false otherwise.

    + +
    internals . validity
    +

    Returns the ValidityState object for internals's + target element.

    + +
    internals . + validationMessage
    +

    Returns the error message that would be shown to the user if internals's + target element was to be checked for validity.

    + +
    valid = internals . + checkValidity()
    +

    Returns true if internals's + target element has no validity problems; false otherwise. + Fires an invalid event at the element in the latter case. +

    + +
    valid = internals . + reportValidity()
    +

    Returns true if internals's + target element has no validity problems; otherwise, + returns false, fires an invalid event at the element, and + (if the event isn't canceled) reports the problem to the user.

    + +
    internals . labels
    +

    Returns a NodeList of all the label elements that + internals's target element is associated with. +

    + +

    Each ElementInternals has a target element, which is a custom element. ElementInternals provides various operations @@ -67682,6 +68086,175 @@ interface ElementInternals { targeting element, and return it.

    +
    + +

    Each form-associated custom element has submission value. It is used to provide one or more + entries on form submission, and + The initial value of submission value is null, and + submission value can be null, a string, a + File, or a list of entries.

    + +

    Each form-associated custom element has state. + It is information with which the user agent can restore a user's input for the element. + The initial value of state is null, and state can be null, a string, a File, or a + list of entries.

    + +

    The setFormValue() method is used by + the custom element author to set the element's submission + value and state, thus communicating these to the user + agent.

    + +

    When the user agent believes it is a good idea to restore a form-associated custom + element's state, for example after navigation or + restarting the user agent, they may enqueue a custom element callback reaction with + that element, callback name "formStateRestoreCallback", and an argument + list containing the state to be restored, and "restore".

    + +

    If the user agent has a form-filling assist feature, then when the feature is invoked, + it may enqueue a custom element callback reaction with + a form-associated custom element, callback name + "formStateRestoreCallback", and an argument list containing the state value + determined by history of state value and some heuristics, and + "autocomplete".

    + +

    In general, the state is information specified by a user, and + the submission value is a value after canonicalization + or sanitization, suitable for submission to the server. The following examples makes this + concrete:

    + +

    Suppose that we have a form-associated custom element which asks a + user to specify a date. The user specifies "3/15/2019", but the control wishes to + submit "2019-03-15" to the server. "3/15/2019" would be a state of the element, and "2019-03-15" would be + a submission value.

    + +

    Suppose you develop a custom element emulating a the behavior of the existing + checkbox input type. Its submission value would be the value of its value content attribute, or the string "on". Its state would be one of "checked", "unchecked", "checked/indeterminate", or "unchecked/indeterminate".

    + +
    + +

    The setFormValue(value, + state) method of the ElementInternals interface must + run the following steps:

    + +
      +

    1. Let element be this ElementInternals's target element.

      2. + +

    2. If element is not a form-associated custom element, then throw a + "NotSupportedError" DOMException.

      3. + +

    3. Set target element's submission value to value if value is + not a FormData object, or to a clone of the + entry list associated with value otherwise.

      4. + +

    4. If the state argument of the function is omitted, set element's + state to its submission + value. + +

    5. Otherwise, if state is a FormData object, set element's + state to clone of the + entry list associated with state.

      6. + +

    6. Otherwise, set element's state to + state.

      7. +
    + +
    + +

    Each form-associated custom element has validity flags named + valueMissing, typeMismatch, + patternMismatch, tooLong, + tooShort, rangeUnderflow, + rangeOverflow, stepMismatch, and + customError. They are false initially.

    + +

    Each form-associated custom element has a + validation message string. It is the empty string + initially.

    + +

    Each form-associated custom element has a + validation anchor element. It is null initially.

    + +

    The setValidity(flags, + message, anchor) method of the ElementInternals + interface must run the following steps:

    + +
      +

    1. Let element be this ElementInternals's target element.

      2. + +

    2. If element is not a form-associated custom element, then throw a + "NotSupportedError" DOMException.

      3. + +

    3. If flags contains one or more true values and message is not given + or is the empty string, then throw a TypeError.

      4. + +

    4. For each entry flag → value of flags, set + element's validity flag with the name flag to value.

      5. + +

    5. Set element's validation message + to the empty string if message is not given or all of element's validity + flags are false, or to message otherwise.

      6. + +

    6. If element's customError validity flag is true, then set + element's custom validity error message to element's + validation message. Otherwise, set + element's custom validity error message to the empty string.

      7. + +

    7. Set element's validation anchor to + null if anchor is not given. Otherwise, if anchor is not a + shadow-including descendant of element, then throw a + "NotFoundError" DOMException. Otherwise, set + element's validation anchor to + anchor.

      8. +
    + +

    The validationMessage + attribute of ElementInternals interface, on getting, must return the + validation message of this + ElementInternals's target element.

    + +

    When entry construction algorithm for a + form-associated custom element is invoked, given an element element and a + list entry list, run the following steps:

    + +
      +
    1. +

      If element's submission value is a + list of entries, then append each item of element's submission value to entry list, and return.

      + +

      In this case, user agent does not refer to the + name content attribute value. An implementation of + form-associated custom element is responsible to decide names of + entries. They can be the + name content attribute value, they can be strings based on + the name content attribute value, or they can be unrelated + to the name content attribute.

      +
      2. + +

    2. If the element does not have a name attribute + specified, or its name attribute's value is the empty string, + then return.

      3. + +

    3. If the element's submission value is not + null, append an entry to entry list with the + name attribute value and the + submission value.

      4. +
    + +
    +

    Common idioms without dedicated elements

    Bread crumb navigation

    @@ -68069,6 +68642,8 @@ contradict people?
  • a fieldset element that is a disabled fieldset
    • +
  • a form-associated custom element that is + disabled

    • This definition is used to determine what elements :enabled pseudo-class must match any button, input, select, textarea, - optgroup, option, or fieldset element that is not optgroup, option, fieldset element, or + form-associated custom element that is not actually disabled.

    @@ -106587,10 +107163,11 @@ dictionary StorageEventInit : EventInit { element's value and checkedness based on the element's attributes.)

    -

  • If element is a form-associated element, the form element pointer is not null, there is no template - element on the stack of open elements, element is either not listed or doesn't have a

    If element is a form-associated element and not a + form-associated custom element, the + form element pointer is not null, there is no + template element on the stack of open elements, element is + either not listed or doesn't have a form attribute, and the intended parent is in the same tree as the element pointed to by the form element pointer, then associate element @@ -119455,7 +120032,8 @@ interface External { output; select; textarea; - img + img; + form-associated custom elements — @@ -119468,7 +120046,8 @@ interface External { object; output; select; - textarea + textarea; + form-associated custom elements — @@ -119479,7 +120058,8 @@ interface External { input; object; select; - textarea + textarea; + form-associated custom elements — @@ -119489,7 +120069,8 @@ interface External { input; output; select; - textarea + textarea; + form-associated custom elements — @@ -119514,7 +120095,8 @@ interface External { output; progress; select; - textarea + textarea; + form-associated custom elements — @@ -119855,6 +120437,12 @@ interface External { textarea Whether the form control is disabled Boolean attribute + + disabled + form-associated custom elements + Trigger "formDisabledCallback" reaction, and + disable form submission for the element's data. + Boolean attribute disabled fieldset @@ -119905,7 +120493,8 @@ interface External { object; output; select; - textarea + textarea; + form-associated custom elements Associates the element with a form element ID* @@ -120174,8 +120763,9 @@ interface External { input; output; select; - textarea - Name of the element to use for form submission and in the form.elements API + textarea; + form-associated custom elements + Name of the element to use for form submission and in the form.elements API Text* name @@ -120279,6 +120869,11 @@ interface External { textarea Whether to allow the value to be edited by the user Boolean attribute + + readonly + form-associated custom elements + Affects willValidate + Boolean attribute referrerpolicy a;