Wsrtjtyk

In my current angular 7 application we are struggling with a component from a library, which requires some css ressources. We do not want to apply those ressources to all the rest of our application, but to one specific component, its children and grandchildren.

During our research we found these two interesting options:

encapsulation: ViewEncapsulation.Native

and:

encapsulation: ViewEncapsulation.ShadowDom

In consequence, they both seem to use the browser's shadow dom implementation.

What is the difference between those options?

This has been been baffling me days ago, then I realized that they converge a little but not totally. The dissimilarity in fact is about the newer version of shadowDOM (v1). As you can see here in angular's code source they added an other condition for the ViewEncapsulation.ShadowDom:

Here they share the same return

 case ViewEncapsulation.Native:

 case ViewEncapsulation.ShadowDom:

      return new ShadowDomRenderer(this.eventManager, this.sharedStylesHost, element, type);    

And then they check whether it is ViewEncapsulation.ShadowDom or not (else condition)

     if (component.encapsulation === ViewEncapsulation.ShadowDom) {

          this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});

        } else {

          this.shadowRoot = (hostEl as any).createShadowRoot();

        }

Thus, ViewEncapsulation.ShadowDom is a step to add a support to ShadowDOM V1, and maybe deprecate the ViewEncapsulation.Native as described here:

ViewEncapsulation.Shadow is added as a new API, rather than changing the behavior of the ViewEncapsulation.Native option, which could lead
to unexpected results for developers currently using the v0 API. This
should (eventually?) deprecate the ViewEncapsulation.Native option.

Angular uses ViewEncapsulation to limit styles and views to the component they have been mentioned in, I think you already know this.
Native doesn't have many details, what I do know is that it is selective for browsers, not all browsers actually acknowledge it.
For ShadowDom, Angular docs has an explanation but it's not too detailed, this extract clears up some parts though: "Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. Think for example of a element, with the default browser controls exposed. All you see in the DOM is the element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements."
See more here:MDN Docs