How to style modals in ionic 5 with shadow dom

Question

I have recently upgraded from Ionic 4 to 5 and none of my modal styling is working. I've read the docs and what I'm doing seems like it should work. In global.scss I have the following:

.modal-fullscreen .modal-wrapper {
    border-radius: 0;
    position: absolute;
    top: 20px;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

and when I create the modal, I use modal-fullscreen as the cssClass parameter.

  inviteClient( client : IndexClient ) : void {
    this.modalCtrl.create({
      component: InviteClientComponent,
      componentProps: {
        'consult_client': client,
        'location_id': this.location
      },
      backdropDismiss: false,
      cssClass: "modal-fullscreen"
    }).then( modal => modal.present());
  }

The docs clearly state that this should work here:

We recommend passing a custom class to cssClass in the create method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the Usage section for an example of how to pass a class using cssClass.

/* DOES NOT WORK - not specific enough */ .modal-wrapper {  
background: #222; }

/* Works - pass "my-custom-class" in cssClass to increase specificity
*/ .my-custom-class .modal-wrapper {   background: #222; }

Any idea what I can do?