Two-way DOM update and mutation observers about amp-react-prototype HOT 1 OPEN

A possibly much simpler approach - expected mutation matching:

1. Some internal mutations are ignored and thus can be done safely by components. These include i-amphtml attributes, --i-amphtml-x CSS vars in style, children with i-amphtml-x class or special attribute, i-amphtml-x attribute values (slot=i-amphtml-slide-1), etc. The expectation is that majority of mutations that need to be done in the light subtree can be done this way.
2. For other light tree mutations we will require a MutationRecord to be created and pushed for the target element into the "pending set". When the MutationObserver is notified with a mutation, it can match the MutationRecord against the "pending set", and ignore the record if a matching one exists.

For instance, the component's implementation modifies the light tree:

useEffect(() => {
  const el = ref.current;

  // This record will be ignore because the attribute's value
  // starts with "i-amphtml-" prefix.
  el.setAttribute('slot', 'i-amphtml-slot1');

  // The argument is in the `MutationRecord` format.
  // The `applyMutation` will actually apply the mutation, e.g. it will
  // call `el.setAttribute('selected', '')`, but it will also record this
  // mutation record in the "pending set".
  applyMutation({target: el, type: 'attributes', attributeName: 'selected', value: ''});
});

The main idea here is that the light tree mutation are very rare and thus can take a bit more verbosity and indirection to execute to avoid confusion w.r.t. where a mutation comes from.

from amp-react-prototype.