Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sibling components next to ViewEncapsulation.Native mode component are getting their styles put in Shadow DOM #7887

Closed
jschwarty opened this issue Apr 2, 2016 · 8 comments
Closed

Sibling components next to ViewEncapsulation.Native mode component are getting their styles put in Shadow DOM #7887

jschwarty opened this issue Apr 2, 2016 · 8 comments
Labels
area: core Issues related to the framework runtime core: CSS encapsulation freq1: low P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent type: bug/fix
Milestone
Backlog

Comments

@jschwarty
Copy link
Contributor

Steps to reproduce and a minimal demo of the problem

  • Create sibling components in the "component tree" (have a parent component that has multiple components within its template) and give each one of them at least one CSS class in the styles or styleUrls component metadata property.
  • Set one of those sibling components encapsulation component metadata property to ViewEncapsulation.Native
  • Make sure the other sibling components are not set to ViewEncapsulation.Native mode.
  • Run the code in Chrome since it has Shadow DOM support.
  • Inspect the DOM in the browser, expand the #shadow-root for the component that is set to ViewEncapsulation.Native mode.
  • Notice that the styles from the other sibling components are ending up inside of the shadow dom for the component that is set to ViewEncapsulation.Native:
    image
  • Also notice that the styles from the other sibling components are still ending up in the head tag as expected:
    image

Here is an example on Plunker

Current behavior
Looks like the CSS shim that is getting created into a <style> tag is getting inserted into sibling components in the component tree that are in ViewEncapsulation.Native mode. It also looks like they are put in there in the same order that the custom elements are found within the parent component template markup. So if two non-native mode sibling components are processed in the DOM tree before the native mode one, their <style> tags will come before the native one and the native one's markup in the shadow DOM:
image

Expected/desired behavior
I believe that this is not the desired behavior and that those other sibling component styles should not be ending up in the Shadow DOM of the native mode component.
@robwormald
Copy link
Contributor

cc @mhevery @tbosch

@vicb vicb added type: bug/fix area: core Issues related to the framework runtime labels Sep 28, 2016
@vicb
Copy link
Contributor

vicb commented Sep 28, 2016

still an issue with Angular 2.0.1

http://plnkr.co/edit/M785PCAb3Hc7WLD7EKyB

DzmitryShylovich added a commit to DzmitryShylovich/angular that referenced this issue Feb 5, 2017
@DzmitryShylovich
fix(platform-browser): should only add styles with native encapsulati…
c6c8429 
…on in shadow DOM

Closes angular#7887
DzmitryShylovich added a commit to DzmitryShylovich/angular that referenced this issue Feb 9, 2017
@DzmitryShylovich
fix(platform-browser): should only add styles with native encapsulati…
0d38cb7 
…on in shadow DOM

Closes angular#7887
DzmitryShylovich added a commit to DzmitryShylovich/angular that referenced this issue Feb 9, 2017
@DzmitryShylovich
fix(platform-browser): should only add styles with native encapsulati…
eca198e 
…on in shadow DOM

Closes angular#7887
DzmitryShylovich added a commit to DzmitryShylovich/angular that referenced this issue Feb 9, 2017
@DzmitryShylovich
fix(platform-browser): should only add styles with native encapsulati…
f1e826a 
…on in shadow DOM

Closes angular#7887
IgorMinar pushed a commit that referenced this issue Feb 16, 2017
@IgorMinar
fix(platform-browser): should only add styles with native encapsulati…
fadaf1e 
…on in shadow DOM (#14313)

Closes #7887

PR Close #14313
@tbosch tbosch reopened this Feb 17, 2017
@tbosch
Copy link
Contributor

tbosch commented Feb 17, 2017

The fix in the PR is actually wrong and breaks the styling of components with emulated / no encapsulation inside of components that use native encapsulation.

Our strategy is as follows:
Copy all styles that are in the <head> into every shadow root. This is non optimal, but correct in terms of styling. Detecting which components are actually used inside of a shadow root tree is non trivial and requires overhead that we would also pay for users that don't use shadow dom.

I.e. we are waiting for a browser feature that allows to style elements inside of shadow roots via a <style> element in <head>. I am going to revert this change and adjust the test to reflect the problem (as we obviously had no test that actually tests the scenario that a component with shadow dom uses a component without).

tbosch added a commit to tbosch/angular that referenced this issue Feb 17, 2017
@tbosch
fix(platform-browser): allow to style components that don’t use shado…
5e75088 
…w dom inside of components that do.

This reverts 53cf2ec
and adds a test for this case.

Related to angular#7887
tbosch added a commit to tbosch/angular that referenced this issue Feb 17, 2017
@tbosch
fix(platform-browser): allow to style components that don’t use shado…
abd976a 
…w dom inside of components that do.

This reverts 53cf2ec
and adds a test for this case.

Related to angular#7887
tbosch added a commit to tbosch/angular that referenced this issue Feb 17, 2017
@tbosch
fix(platform-browser): allow to mix shadow dom with non shadow dom
017f3a5 
Allow to style components that don’t use shadow dom inside of components that do.

This reverts 53cf2ec
and adds a test for this case.

Related to angular#7887
tbosch added a commit to tbosch/angular that referenced this issue Feb 17, 2017
@tbosch
fix(platform-browser): allow to mix shadow dom with non shadow dom
a7dead0 
Allow to style components that don’t use shadow dom inside of components that do.

This reverts 53cf2ec
and adds a test for this case.

Related to angular#7887
tbosch added a commit to tbosch/angular that referenced this issue Feb 17, 2017
@tbosch
fix(platform-browser): allow to mix shadow dom with non shadow dom
0b07baa 
Allow to style components that don’t use shadow dom inside of components that do.

This reverts 53cf2ec
and adds a test for this case.

Related to angular#7887
tbosch added a commit to tbosch/angular that referenced this issue Feb 17, 2017
@tbosch
fix(platform-browser): allow to mix shadow dom with non shadow dom
e2ab2e4 
Allow to style components that don’t use shadow dom inside of components that do.

This reverts 53cf2ec
and adds a test for this case.

Related to angular#7887
IgorMinar pushed a commit that referenced this issue Feb 18, 2017
@tbosch @IgorMinar
fix(platform-browser): allow to mix shadow dom with non shadow dom
ab26b65 
Allow to style components that don’t use shadow dom inside of components that do.

This reverts 53cf2ec
and adds a test for this case.

Related to #7887
@Hanfrey
Copy link

Hanfrey commented Mar 9, 2017

Can this also be reverted in the next 2.x Version?

@DzmitryShylovich
Copy link
Contributor

yeah, it must be reverted in 2.x @tbosch

asnowwolf pushed a commit to asnowwolf/angular that referenced this issue Aug 11, 2017
@DzmitryShylovich
fix(platform-browser): should only add styles with native encapsulati…
1ff1c50 
…on in shadow DOM (angular#14313)

Closes angular#7887

PR Close angular#14313
asnowwolf pushed a commit to asnowwolf/angular that referenced this issue Aug 11, 2017
@tbosch
fix(platform-browser): allow to mix shadow dom with non shadow dom
be2676f 
Allow to style components that don’t use shadow dom inside of components that do.

This reverts 53cf2ec
and adds a test for this case.

Related to angular#7887
juleskremer pushed a commit to juleskremer/angular that referenced this issue Aug 28, 2017
@DzmitryShylovich @juleskremer
fix(platform-browser): should only add styles with native encapsulati…
8961a64 
…on in shadow DOM (angular#14313)

Closes angular#7887

PR Close angular#14313
juleskremer pushed a commit to juleskremer/angular that referenced this issue Aug 28, 2017
@tbosch @juleskremer
fix(platform-browser): allow to mix shadow dom with non shadow dom
230f0e1 
Allow to style components that don’t use shadow dom inside of components that do.

This reverts 53cf2ec
and adds a test for this case.

Related to angular#7887
@ngbot ngbot bot added this to the Backlog milestone Jan 23, 2018
@tobi-or-not-tobi
Copy link

I can confirm this is still the behaviour with angular 6. The shadow dom of a native encapsulated component receives multiple style elements with the css rules from other components.

@jelbourn jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed severity3: broken labels Oct 1, 2020
@petebacondarwin petebacondarwin mentioned this issue Jan 23, 2021
Open
@petebacondarwin
Copy link
Member

Duplicate of #5059 5059

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 23, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: core Issues related to the framework runtime core: CSS encapsulation freq1: low P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent type: bug/fix
Projects
None yet
Milestone
Backlog
10 participants
@petebacondarwin @vicb @robwormald @tbosch @jelbourn @pkozlowski-opensource @jschwarty @tobi-or-not-tobi @DzmitryShylovich @Hanfrey