Can I create a widget that doesn't register a click on its' background?

[Woodpeckerus]

I have a custom widget that I need to be overlaid over the entire Map View widget. Let's say the widget will have a button in the corner that needs to respond to clicks. At the same time, I don't want the background of the widget (everything except that button) to register any clicks or mouse events so I can still interact with Map View. 

Is it possible to achieve this? 

Basic example would look something like this: 

[MarcelŠíp]

By using pointer-events CSS property you can control whether a HTML element is clickable. So you can set pointer-events for your button to 'auto' and to 'none' for the whole div of your widget. You may face a problem that the root div of your widget is out of your control - I was able to solve it using javascript:

const widgetRootDiv = myDiv.closest('div .is-widget');
widgetRootDiv.style.setProperty('pointer-events', 'none', 'important');