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

[mifloma]

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]

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.

[mifloma]

I have not managed to read out overlayBackdrop from OverlayRef. I only can read out

• overlayWrapper with this._overlayRef.hostElement
• overlayContainer with this._overlayRef.hostElement.parentElement
• overlayPane with this._overlayRef.overlayElement

With this._overlayRef.hostElement.parentElement.children I can find overlayBackdrop in the returned HTMLCollection but if I try to access the element e.g. with this._overlayRef.hostElement.parentElement.children[x]... I get an exception cause this._overlayRef.hostElement.parentElement.children[x] is always undefined.

[crisbeto]

The backdrop is on OverlayRef.backdropElement.

[mifloma]

Thank you for your help. I'm confused, sorry. The interface ScrollStrategy defines a method

attach: (overlayRef: OverlayReference) => void;

So I was talking about the interface OverlayReference. It hasn't a property backdropElement. I've checkt the code now: OverlayRef is the implementation class of OverlayReference. I wasn't able to cast the past value to OverlayRef. The parameter is undefined after casting to OverlayRef.

[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