Controlled vs uncontrolled lightbox

AMP's lightboxes are components with completely separate "roots" and lifecycle. They only supply imperative APIs such as:

```
lightbox.open().then(result => {
// Lightbox has closed with a possible return value.
});
```

A classical approach in React would use a controlled style:
```
export function Demo() {
const [open, setOpen] = React.useState(false);
return (

There are some benefits when using a controlled style. But there are also some nuances to consider:
1. 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`.
2. Out-of-lightbox closing has to be non-vetoable. This can probably be remedied by an additional `onCloseRequest` event callback.
3. 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.