[aminesbdev]

Angular applies DOM property bindings during SSR by setting the property on the domino element. Several properties that
browsers reflect to attributes are missing or misnamed here, so their value never reaches the serialized HTML. For
example, [popover], [inert] and [max] on <meter> are missing from the server output, which the browser shows
until hydration, and which content in @defer (hydrate never) keeps.

There are three commits:

1. autofocus, autocapitalize and noModule were defined as autoFocus, autoCapitalize and nomodule, so the
   standard names didn't reflect anything. The old names stay as aliases, so code that sets them keeps working.
   autocapitalize also gets the browser getter (off → none, on → sentences).
2. button, fieldset, keygen, label, meter, object, output and progress passed the same
   formAssociatedProps object to define(), which adds each element's attributes to it, so every element inherited
   the attributes of the ones defined before it (fieldset.type was "submit", progress had formAction and
   data). Each one now gets its own object, like input, select and textarea. The properties that only worked
   through that leak are declared where they belong: value on meter and progress, htmlFor on output, and
   the read-only type of fieldset and output. output also gets value and defaultValue, which set its text
   content like on textarea, instead of the value attribute it got from button. Without this, adding attributes to button in the next commit
   would have leaked them to six other elements.
3. Adds the missing attributes: autocorrect, inert, inputMode and popover on all HTML elements, decoding and
   fetchPriority on img, fetchPriority on link and script, command and popoverTargetAction on button,
   formAction, popoverTargetAction and webkitdirectory on input, name on details, rel on form, headers
   on table cells, playsInline and disablePictureInPicture on video, disableRemotePlayback on media elements,
   and min/max/low/high/optimum on meter. Most of them are plain reflections. popover is nullable
   (setting it to null removes the attribute), which also needed enumerated values like {value: "", alias: ...}
   to be keyed by their value rather than by the object, and autocorrect is a boolean over the on/off
   attribute. inputMode replaces the obsolete keywords that input and textarea had.

I left out contentEditable (its setter validates and throws), slot, part and the token lists (relList,
controlsList), to keep this to plain reflected attributes.

The new cases are in test/domino.js. I didn't touch web-platform-blocklist.json, since the WPT harness isn't run
anymore.

Fixes angular/angular#71603

[alan-agius4]

Thanks for this PR! Reflecting modern attributes like inert, popover, fetchPriority, decoding, and inputMode fixes an important SSR issue where Angular bindings to these DOM properties were not serialized to HTML attributes. Also untangling formAssociatedProps fixes the bug where <fieldset>.type returned 'submit'.

The main concern is that renaming existing properties (autoFocus, autoCapitalize, nomodule) creates a silent breaking change for existing Angular SSR apps and build tools (especially script.nomodule, which could cause browsers to run both modern and legacy bundles).

We should keep backwards-compatible aliases for these. Details inline.

[alan-agius4]

Thanks for addressing the previous review feedback! Left a few small follow-up notes inline.

[alan-agius4]

Two small things here:

1. Per the WHATWG HTML spec, the invalid value default of autocorrect is the On state (true), and step 2 of computing the used autocorrection state returns the state of the element's own attribute whenever the attribute is present. Form inheritance (step 3) only applies when autocorrect is missing (v === null). Currently, <form autocorrect="off"><input autocorrect="bogus"></form> falls out of if (v !== null) and inherits false from the form instead of returning true. We can simplify the v !== null check to return v.toLowerCase() !== 'off';.
2. Nit: Line 63 checks this.localName === 'input' while line 73 checks this.tagName in autocorrectInheritingElements. Using lowercase tag names in autocorrectInheritingElements and checking this.localName in autocorrectInheritingElements avoids computing _tagName and stays consistent with line 63:

var autocorrectInheritingElements = Object.assign(Object.create(null), {
  "button": true, "fieldset": true, "input": true, "output": true,
  "select": true, "textarea": true
});

function AUTOCORRECT(attr) {
  return {
    get: function() {
      if (this.localName === 'input' &&
          (this.type === 'url' || this.type === 'email' || this.type === 'password')) {
        return false;
      }
      var v = this._getattr(attr);
      if (v !== null) {
        return v.toLowerCase() !== 'off';
      }
      if (this.localName in autocorrectInheritingElements && this.form) {
        return this.form.autocorrect;
      }
      return true;
    },

[alan-agius4]

Nit: Now that autofocus: Boolean is defined on HTMLElement (line 205), the per-element autofocus: Boolean declarations here on button and on input (line 661), keygen (line 713), select (line 1107), and textarea (line 1308) are redundant and can be removed (similar to how inputMode was removed from input and textarea).

[alan-agius4]

Previously <output> inherited value from <button> via formAssociatedProps. After isolating formAssociatedProps, 'value' in doc.createElement('output') is now false.

Per the HTML spec (and Angular's DomElementSchemaRegistry), HTMLOutputElement exposes value and defaultValue reflecting textContent (just like HTMLTextAreaElement on lines 1288 to 1301). Can we add defaultValue and value here as well so <output [value]="..."> bindings continue to work in SSR?

  props: {
    form: formAssociatedProps.form,
    type: { get: function() { return 'output'; } },
    defaultValue: {
      get: function() { return this.textContent; },
      set: function(v) { this.textContent = v; },
    },
    value: {
      get: function() { return this.defaultValue; },
      set: function(v) { this.defaultValue = v; },
    },
  },

[alan-agius4]

Can we also add a test assertion here for <form autocorrect="off"><input autocorrect="bogus"></form> returning true (and a test in formAssociatedElementsDoNotShareReflectedAttributes for output.value)?