This example shows how we can utilize custom elements to handle clicks (and possibly other events) that happen outside the element.
The example uses a button to open a dialog, and then allows the dialog to be closed by clicking outside the
dialog content area. The content is wrapped in <click-boundary> custom element, which emits a
'clickoutside' event for clicks happening outside it. Note that we must ensure the <dialog>
element does not have any padding so that the custom element can cover its entire area.
The example shows a widget that needs to close when user clicks outside it.