There are some benefits when using a controlled style. But there are also some nuances to consider:
Open state has to be controlled. This expands the required API surface. I.e. to use the XDialog, one must manage open state, supplied as a property, and handle onClose.
Out-of-lightbox closing has to be non-vetoable. This can probably be remedied by an additional onCloseRequest event callback.
AMP element itself has to be uncontrolled since DOM elements do not have controlled/uncontrolled concept. Thus we'd have to remap the controlled state to imperative DOM APIs.
AMP's lightboxes are components with completely separate "roots" and lifecycle. They only supply imperative APIs such as:
A classical approach in React would use a controlled style:
There are some benefits when using a controlled style. But there are also some nuances to consider:
XDialog
, one must manageopen
state, supplied as a property, and handleonClose
.onCloseRequest
event callback.