How to use overlay in a dialog inside a window in Kendo UI?

Question

I currently use the Kendo Ui Angular

I am currently trying to use inside a window a component that calls a dialog, but my dialog is not applying the overlay opacity effect, currently having this result:

Looking at the gift tree through the inspect I can achieve my expected effect by changing the class property .k-window .k-overlay for opacity: 0.5:

.k-window .k-overlay {
    position: absolute;
    opacity: 0.5;
}

Having then this result:

I tried to add an id in my class:

<kendo-dialog id="dialogConf" title="Confirmação" *ngIf="opened" (close)="closeDialog(false)" [minWidth]="250" [width]="450">
    <p style="margin: 30px; text-align: center;">Confirma o cancelamento?</p>
    <kendo-dialog-actions>
        <button kendoButton (click)="closeDialog(false)">Não</button>
        <button kendoButton (click)="closeDialog(true)" primary="true">Sim</button>
    </kendo-dialog-actions>
</kendo-dialog>

And then apply on .scss of my component:

#dialogConf.k-window .k-overlay {
    opacity: 0.5!important;
}

I also tried to:

.k-window .k-overlay::shadow {
    opacity: 0.5!important;
}

@Edit:

I managed to solve through the code:

::ng-deep .k-window .k-overlay {
    opacity: 0.5!important;
}

But I read that soon this pseudo selector will be removed soon because it goes over the style isolation protection and this can potentially encourage bad usage practices, so I leave the question open if there is a better solution.