dropZone show/hide with directive or component only

I have a dropzone component and dropzone directive for now. Usage:

<div dropZone> Some host element
    <drop-zone></drop-zone>
<div>

Drop zone basically is an element, which can be added to any place in the app, even in root element to cover entire page. So it is independent from <input type='file'>

Is it possible some how to use only directive or component to achieve such functionality? Here is simplified project to play and see dropzone in action: StackBlitz

One of ideas was to implement it through component only

:host { 
   opacity: 0
   position: absolute;
   height: 100%;
   width: 100%
}


 :host.active {
  opacity: 1
}

But I do not like drop-zone be present on the page with opacity: 0, as it can conflict with other potential absolute elements. It can also catch events, and cause some issues.

For now I see that element should be hidden somehow, but at the same time should catch drop events. Seems impossible, frankly :) As display: none, visibility: hidden, height: 0 won't let to catch drop events.

How to do it with directive only? Directive potentially can generate some html dynamically and append/remove it to/from document, but this operation looks quite expensive. Would like to stick to such approach: add drop-zone once, and show/hide it on drop events.