backdropClass doesn't work on submenus

[isaaclyman]

Summary

The backdropClass Input field on HcPopComponent works fine on top-level popovers but doesn't work on nested hcMenu popovers. Possibly this is because they don't have their own backdrop. Unfortunately, there doesn't seem to be any other way to add a class to a containing element of the submenu.

In our use case we don't care a lot about styling the backdrop itself, we're just looking for an easy way to scope our CSS to a specific popover.

It might be enough to document this limitation (maybe even this issue is documentation enough) but if we wanted to go a step further, we could add a warning when backdropClass is used on a submenu or even provide alternative functionality, e.g. containerClass.

Reproduction

Steps to reproduce:

1. Create a nested hcMenu. Add the backdropClass attribute to one of the submenus.

Stackblitz reproduction: https://stackblitz.com/edit/angular-tmr3oa?file=src%2Fapp%2Fpopover-menu%2Fpopover-menu-example.component.html

[isaaclyman]

On a related note: the specific thing we're trying to do is add overflow: auto; to an hc-pop-container. Maybe that's something that could/should be done in general?

[isaaclyman]

For reference, this is what we ended up adding to our root stylesheet:

::ng-deep .hc-pop-container:not(.hc-tooltip-container) {
  overflow-y: auto;
}