In an attempt to develop reusable components with Angular 1.4.3 and Angular-Material 1.0.5, the goal is to seamlessly integrate these components across various applications.
However, a challenge arises as the Angular Material CSS contains styling rules that are applied to fundamental elements such as html and body, resulting in a conflict with the styles of the host application.
For example, consider application A which has its own unique styles for 'body', 'html', and 'input' elements. When integrating a custom component that includes Angular Material CSS and JS, application A's original styles are overridden. Since I do not have ownership of application A's styles, using '!important' is not a viable solution.
Initially, I attempted to namespace Angular Material styles during the grunt build process to address this issue. However, this approach did not resolve the problem and some Angular Material directives stopped functioning properly.
Despite looking through Angular Material's GitHub issues, a suitable solution to properly namespace Angular Material styles remains elusive:
https://github.com/angular/material/issues/6369
https://github.com/angular/material/issues/469
If anyone has insights or suggestions on how to effectively namespace Angular Material styles, your assistance would be greatly appreciated.