Angular components leave custom elements in the dom and that breaks styles which rely on child selectors. Here’s a workaround.
Versions used below
You’ve got some Angular components that look like
Since Angular components leave their custom elements in the dom, you get this dom nesting
The nesting seen above breaks styles that use child selectors:
Change the child component’s selector to something else, like an attribute selector.
Parent template changes to
the dom becomes
and now the child selector matches. Sweet.
What about binding things on child’s root element?
We lost the ability to bind things on the
<li> because that moved out of the child template.
@HostListener() can let us achieve that.
Well, that wasn’t ideal but it worked.