Hi @jeb , nice to see you again too.
Sure, I will explain to you why.
I am working in an Angular Project that is deployed as a web component. That web component is used/embedded in thirds party web sites.
Some thirds party website uses css global selectors in a bad way causing overriding in our web component.
One way we see to prevent the css overriding that work for us is using CSS Modules.
Also, when there are multiples CSS rules for the same element we know that it will win the rule with more specific selectors. Because of that, we can use the postcss-prefix-selector in order to make our class name value has more specific selectors.
Before Deploy 1:
<div class="grid-container"> </div>
After Deploy 1:
<div class="german-prefix grid-container"> </div>
Additionally, we can hash it in order to prevent having a conflict with other CSS rule of an external site:
<div class="_2q1pPTls NF9ou4CX"> </div>
Finally, we can add a different prefix selector every time we make a new deployment and then hash the class name + the prefix, in order can prevent (or at least make it more difficult) the web component be automated by external software.
About ViewEncapsulation it wasn’t enough to prevent CSS overriding.
On resume, the web component is already Obfuscated thanks to CSS Modules. However, the web component is a custom library of components that we would like to implement CSS Modules in order to prevent CSS overrides.
An example, is that a form that should seem like this: