Insufficient docs for interaction when mixing view encapsulation modes

[JBusch]

📚 Docs or angular.io bug report

Description

Almost no explanation on how ViewEncapsulation.Shadowdom works

Expected vs Actual Behavior**

Detailed documentation for ViewEncapsulation.Shadowdom should be provided, since it is a core feature of Angular.

[Splaktar]

Status of the Guide

There is a guide on ViewEncapsulation here: https://angular.io/guide/view-encapsulation. Most of the details of Shadow DOM are outside of the scope of Angular and are provided by the spec and browser implementations. The guide links to https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM to learn more about how Shadow DOM works in general.

The guide also links to the browser support page for Shadow DOM: https://caniuse.com/shadowdomv1. In turn, this site links directly to the spec: https://www.w3.org/TR/shadow-dom/.

The guide also includes the following

ShadowDom view encapsulation uses the browser's native shadow DOM implementation to attach a shadow DOM to the component's host element, and then puts the component view inside that shadow DOM. The component's styles are included within the shadow DOM.

warning: few browsers support shadow DOM encapsulation at this time

ShadowDom view encapsulation only works on browsers that have native support for shadow DOM. The support is still limited, which is why Emulated view encapsulation is the default mode and recommended in most cases.

Some of these comments are no longer accurate as the majority of browsers now support Shadow DOM v1. But Emulated view encapsulation is still the default and recommended mode.

Specific issues

In Discord, you mentioned some specific issues with

the problem is that nested components gets styles injected from parent, inside their shadow dom. If i nest lets say five components deep, worst case in the last child, fives styles are being injected And i can not find anything concerning this in the docs Imo, this behaviour renders viewEncapsulation.Shadowdom useless, not to say dangerous.
Because you think you have an independent component, but actually, you totally do not.

Can you please provide a StackBlitz demo of this?

Are you using encapsulation: ViewEncapsulation.ShadowDom? In your comments you refer to it as Shadowdom which isn't valid.

[JBusch]

Of course i'm talking about and using ViewEncapsulation.ShadowDom. I'm not mentoning something else in the issue?

Thanks for all the links, but i'm pretty aware about the spec.
I think the angular specifics to its own implementation of view encapsulation should be documented, thas why i raised this issue.

But Emulated view encapsulation is still the default and recommended mode.
Why is that though, as shadow dom is a well supported standard by now?

I would need some time for a stackblitz, but that would be another issue, wouldn't it? Also i think it would be a duplicate of #5059 (comment)

[Splaktar]

i'm talking about and using ViewEncapsulation.ShadowDom. I'm not mentioning something else in the issue?

If you look in the OP, you put ViewEncapsulation.Shadowdom, I just wanted to ensure this wasn't a typo issue.

Thanks for all the links, but i'm pretty aware about the spec.

I need to explain this stuff for the documentation team and we also have a policy that we don't document things that are best documented elsewhere.

I think the angular specifics to its own implementation of view encapsulation should be documented, that's why i raised this issue.

I think that our general feeling is that this is already done. However with the behavior you mentioned, I thought your point was that we may have missed something in the documentation. But we need to clearly spell that out and demonstrate it for the documentation team.

But Emulated view encapsulation is still the default and recommended mode.

Why is that though, as shadow dom is a well supported standard by now?

I think that a proposal to change the default view encapsulation mode is likely best covered in a separate issue. That said, IE11 does not support it and Angular still supports IE11. There are also some issues with Safari.

I would need some time for a stackblitz, but that would be another issue, wouldn't it? Also i think it would be a duplicate of #5059 (comment)

#5059 talks about Native or Shadow DOM v0 encapsulation, so I don't think that would be a duplicate.

That said, we need to sort out if your StackBlitz would demonstrate a documentation issue or a bug. It's not clear atm. It might just demonstrate why and how the documentation needs to be updated.

[JBusch]

Ok, thanks for clarification ! Didn't want to appear rude!

#5059 talks about Native or Shadow DOM v0 encapsulation, so I don't think that would be a duplicate

Same behaviour for ViewEncapsulation.ShadowDom got confirmed in the issue, I think.

Right. I believe the solution is what I wrote here #5059 (comment) think that our general feeling is that this is already done. However with the behavior your mentioned, I thought your point was that we may have missed something in the documentation. But we need to clearly spell that out and demonstrate it for the documentation team.

I thought it would be on purpose, which should be documented. But apparently it's a bug... Confusing Am Fr., 5. Feb. 2021 um 23:05 Uhr schrieb Michael Prentice < notifications@github.com>:

…

i'm talking about and using ViewEncapsulation.ShadowDom. I'm not mentioning something else in the issue? If you look in the OP, you put ViewEncapsulation.Shadowdom, I just wanted to ensure this wasn't a typo issue. Thanks for all the links, but i'm pretty aware about the spec. I need to explain this stuff for the documentation team and we also have a policy that we don't document things that are best documented elsewhere. I think the angular specifics to its own implementation of view encapsulation should be documented, that's why i raised this issue. I think that our general feeling is that this is already done. However with the behavior your mentioned, I thought your point was that we may have missed something in the documentation. But we need to clearly spell that out and demonstrate it for the documentation team. But Emulated view encapsulation is still the default and recommended mode. Why is that though, as shadow dom is a well supported standard by now? I think that a proposal to change the default view encapsulation mode is likely best covered in a separate issue. That said, IE11 does not support it and Angular still supports IE11. There are also some issues with Safari. I would need some time for a stackblitz, but that would be another issue, wouldn't it? Also i think it would be a duplicate of #5059 (comment) <#5059 (comment)> #5059 <#5059> talks about Native or Shadow DOM v0 encapsulation, so I don't think that would be a duplicate. That said, we need to sort out if your StackBlitz would demonstrate a documentation issue or a bug. It's not clear atm. It might just demonstrate why and how the documentation needs to be updated. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#40715 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACGFQIB4UJGZ75YMUTEXWTS5RTRRANCNFSM4XEMMAZQ> .

-- Johannes Busch Heimersfeld 83 46244 Bottrop Tel: 02045 855 08 07

[jelbourn]

Looking at this, it seems like we are in fact missing docs that explain how components with different view encapsulation modes will interact.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}