Attempting to utilize the styleUrls property in my Angular 2 component for leveraging View Encapsulation has presented an issue when new elements are inserted into the DOM post-Angular initialization.
The problem arises with a PrimeNG paginator that lacks appropriate styling due to the lack of scope applied by Angular.
For example, while the <p-datatable> element retains its initial scope since it was part of the original markup, the dynamically added <p-paginator> does not.
https://i.sstatic.net/8GZAZ.png
Consequently, the styles injected by Angular into the HEAD do not correctly apply to my elements:
<style>
p-datatable[_ngcontent-xnm-4] p-paginator[_ngcontent-xnm-4]:not(:first-child) {
display: none;
}
</style>
Is this a limitation of view encapsulation in Angular 2, or is there a method to re-scope the DOM as needed?
edited for typo and clarified title