Bento version of amp-lightbox does not respond to state-bound open attribute changes via amp-bind

[westonruter]

Description

When using amp-lightbox v1.0 (Bento), using amp-bind to manage the open attribute has no effect. Example code:

<amp-state id="state">
  <script type="application/json">
  {"open": false}
  </script>
</amp-state>

<button on="tap:AMP.setState({'state':{'open': true }})">See Quote</button>
<amp-lightbox id="quote-lb" layout="nodisplay" data-amp-bind-open="state.open">
  <blockquote>
    "Don't talk to me about JavaScript fatigue" - Horse JS
  </blockquote>
  <button type="button" on="tap:AMP.setState({'state':{'open': false }})">Nice!</button>
</amp-lightbox>

See live examples comparing Bento and classic components with amp-bind for amp-lightbox, amp-video, and amp-twitter: https://bento-amp-with-amp-bind.glitch.me/

Note that only amp-lightbox appears to not work with amp-bind.

Reproduction Steps

See https://bento-amp-with-amp-bind.glitch.me/

Relevant Logs

No response

Browser(s) Affected

Chrome

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2112231523002

[westonruter]

cc @alanorozco

[samouri]

This is an oversight in the R1 resources system. Since components are lazily built when displayed, beginning with nodisplay means the implementation isn't loaded when amp-bind tries to mutate it here:

amphtml/src/custom-element.js

Lines 1793 to 1804 in a5b5ef1

	/**
	* Called when one or more attributes are mutated.
	* Note: Must be called inside a mutate context.
	* Note: Boolean attributes have a value of `true` and `false` when
	* present and missing, respectively.
	* @param {!JsonObject<string, (null|boolean|string|number|Array|Object)>} mutations
	*/
	mutatedAttributesCallback(mutations) {
	if (this.impl_) {
	this.impl_.mutatedAttributesCallback(mutations);
	}
	}

Solution will likely be a single line of code (scheduleAsap), brainstorming now to ensure it is the right thing to do.

[samouri]

Potential solution: #37619