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.

Start by reviewing the issue's lightbox.open() example and the controlled XDialog example, then compare the listed state, close, and DOM API concerns. Done is not defined in the issue; the open design questions would need a decided controlled or uncontrolled API and documented behavior.

索引モデルが issue の本文から書いたものです。