How can an Angular component query its own shadow DOM?

Question

The following question asks "How to query the shadowDOM in an Angular component test", but I don't want to achieve this in a unit testing context, but the actual component.

Specifically, I have a component whose template contains a canvas that I would like a reference to.

Answer 1

You can extend ShadowRootAware and override onShadowRoot() to obtain a reference to ShadowRoot, which in turn can be used for querying. (using .querySelector)