feat(cdk/overlay): HTML id attributes in overlay elements

Feature Description

CDK Overlay component creates a set of div-Elements into the DOM. It would be much easier to write custom Positioning-Strategies or Scroll-Strategies if the div-Elements had HTML id attributes.

Use Case

I was trying to write a custom Scroll-Strategy for an overlay. My idea was to change some css properties on the overlay-div-Elements to customize scrolling behaviour. Its very difficult to find the overlay div-Elements in the DOM without having an id attribute. I had to search the elements by css-class-names.

If css-style manipulation is not the recommended way to write custom Scroll-Strategies, please close the issue.

[crisbeto]

Ah ok, I see. The OverlayReference is an interface that is meant to mimic the OverlayRef. It’s used primarily by us to avoid circular imports. I’ll submit a PR to update it with all the public properties, but until then, you should be able to cast the overlayRef as OverlayRef. Here’s what the full class looks like: https://github.com/angular/components/blob/master/src/cdk/overlay/overlay-ref.ts

[crisbeto]

The current OverlayRef gets passed to the scroll strategy in the attach method. From there you can read the overlayElement property to get the current overlay that the strategy is attached to.