What is the difference between Native and ShadowDom ViewEncapsulation?

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?

edited Nov 30 '18 at 15:10

Goncalo Peres

1,4591519

asked Nov 21 '18 at 10:23

slartidan

10.5k94981

blog.thoughtram.io/angular/2015/06/29/…

– selem mn
Nov 21 '18 at 10:33

angular.io/api/core/ViewEncapsulation#members

– selem mn
Nov 21 '18 at 10:34

@selemmn Thanks for the links, but the first one seems not to cover ViewEncapsulation.ShadowDom. The second one on the other hand has no documentation for ViewEncapsulation.Native (it is mentioned, but without description).

– slartidan
Nov 21 '18 at 10:59

add a comment |

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?

edited Nov 30 '18 at 15:10

Goncalo Peres

1,4591519

asked Nov 21 '18 at 10:23

slartidan

10.5k94981

blog.thoughtram.io/angular/2015/06/29/…

– selem mn
Nov 21 '18 at 10:33

angular.io/api/core/ViewEncapsulation#members

– selem mn
Nov 21 '18 at 10:34

@selemmn Thanks for the links, but the first one seems not to cover ViewEncapsulation.ShadowDom. The second one on the other hand has no documentation for ViewEncapsulation.Native (it is mentioned, but without description).

– slartidan
Nov 21 '18 at 10:59

add a comment |

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?

edited Nov 30 '18 at 15:10

Goncalo Peres

1,4591519

asked Nov 21 '18 at 10:23

slartidan

10.5k94981

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?

angular shadow-dom angular7

edited Nov 30 '18 at 15:10

Goncalo Peres

1,4591519

asked Nov 21 '18 at 10:23

slartidan

10.5k94981

edited Nov 30 '18 at 15:10

Goncalo Peres

1,4591519

asked Nov 21 '18 at 10:23

slartidan

10.5k94981

edited Nov 30 '18 at 15:10

Goncalo Peres

1,4591519

edited Nov 30 '18 at 15:10

Goncalo Peres

1,4591519

edited Nov 30 '18 at 15:10

Goncalo Peres

1,4591519

asked Nov 21 '18 at 10:23

slartidan

10.5k94981

asked Nov 21 '18 at 10:23

slartidan

10.5k94981

asked Nov 21 '18 at 10:23

slartidan

10.5k94981

blog.thoughtram.io/angular/2015/06/29/…

– selem mn
Nov 21 '18 at 10:33

angular.io/api/core/ViewEncapsulation#members

– selem mn
Nov 21 '18 at 10:34

@selemmn Thanks for the links, but the first one seems not to cover ViewEncapsulation.ShadowDom. The second one on the other hand has no documentation for ViewEncapsulation.Native (it is mentioned, but without description).

– slartidan
Nov 21 '18 at 10:59

add a comment |

blog.thoughtram.io/angular/2015/06/29/…

– selem mn
Nov 21 '18 at 10:33

angular.io/api/core/ViewEncapsulation#members

– selem mn
Nov 21 '18 at 10:34

@selemmn Thanks for the links, but the first one seems not to cover ViewEncapsulation.ShadowDom. The second one on the other hand has no documentation for ViewEncapsulation.Native (it is mentioned, but without description).

– slartidan
Nov 21 '18 at 10:59

blog.thoughtram.io/angular/2015/06/29/…

– selem mn
Nov 21 '18 at 10:33

angular.io/api/core/ViewEncapsulation#members

– selem mn
Nov 21 '18 at 10:34

@selemmn Thanks for the links, but the first one seems not to cover ViewEncapsulation.ShadowDom. The second one on the other hand has no documentation for ViewEncapsulation.Native (it is mentioned, but without description).

– slartidan
Nov 21 '18 at 10:59

add a comment |

2 Answers
2

active

oldest

votes

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.

edited Nov 23 '18 at 12:57

answered Nov 23 '18 at 10:47

selem mn

5,02541939

add a comment |

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

answered Nov 21 '18 at 11:20

Benedict Bincom

563

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53409943%2fwhat-is-the-difference-between-native-and-shadowdom-viewencapsulation%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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.

edited Nov 23 '18 at 12:57

answered Nov 23 '18 at 10:47

selem mn

5,02541939

add a comment |

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.

edited Nov 23 '18 at 12:57

answered Nov 23 '18 at 10:47

selem mn

5,02541939

add a comment |

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.

edited Nov 23 '18 at 12:57

answered Nov 23 '18 at 10:47

selem mn

5,02541939

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.

edited Nov 23 '18 at 12:57

answered Nov 23 '18 at 10:47

selem mn

5,02541939

edited Nov 23 '18 at 12:57

answered Nov 23 '18 at 10:47

selem mn

5,02541939

answered Nov 23 '18 at 10:47

selem mn

5,02541939

answered Nov 23 '18 at 10:47

selem mn

5,02541939

add a comment |

answered Nov 21 '18 at 11:20

Benedict Bincom

563

add a comment |

answered Nov 21 '18 at 11:20

Benedict Bincom

563

add a comment |

answered Nov 21 '18 at 11:20

Benedict Bincom

563

answered Nov 21 '18 at 11:20

Benedict Bincom

563

answered Nov 21 '18 at 11:20

Benedict Bincom

563

answered Nov 21 '18 at 11:20

Benedict Bincom

563

answered Nov 21 '18 at 11:20

Benedict Bincom

563

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu