Demetrios, this might be a general cr-toast issue. Can you take a look?

 Issue 896634  has been merged into this issue.

The reason for this breakage is that the ":host ::slotted()" specificity is different between Shadow DOM v1 and v1, and probably related to  issue 857415 . See attachments for before after showing the problem.

@futhark: Do you have any suggestions on how to address this? The related code is at [1] and [2]. With Shadow DOM v0 the slotted (::content) style gets a higher precedence, which is the desired behavior here.

[1] https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/cr_toast/cr_toast.html?l=36
[2] https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/paper_button_style_css.html?l=9

Deleted: css_before.png 51.7 KB

	css_before.png 51.7 KB View Download

Deleted: css_after.png 47.4 KB

	css_after.png 47.4 KB View Download

Actually  issue 888042  seems more related to the issue here.

Candidate fix at https://chromium-review.googlesource.com/c/chromium/src/+/1290198 by using !important.

@futhark: Any help here is appreciated. Basically we need to figure out what is the right way to have the ::slotted() style have higher precedence.

 Issue 896618  has been merged into this issue.

Is this really a regression with any of the recent changes? Both before and after my changes, rules from different scopes should not be compared on specificity in Shadow DOM v1, thus specificity of ::slotted() rules only compare with specificity of other ::slotted() rules from the same scope.

The cascading order in our Shadow DOM v0 iimplementation is broken (and we could not fix it, both because of compat and implementation) which means you can sometimes see rules from inner scopes win because of specificity when it really should be scope-ordered instead.

The correct way of making an inner scope (::slotted()) rule win is to use !important. See https://drafts.csswg.org/css-scoping/#shadow-cascading

> Is this really a regression with any of the recent changes?

CL at [1] (landed a few days ago) switched from Shadom DOM v0 to Shadow DOM v1 at, which is when we started observing the broken styles. It's a regression from WebUI's point of view, but not necessarily a regression from Shadow DOM v1's perspective.

> The correct way of making an inner scope (::slotted()) rule win is to use !important.

Thanks for the link. So, it sounds that my proposed CL at #7 is the correct way of doing this. I'll send the CL out for review.

[1] https://chromium-review.googlesource.com/c/chromium/src/+/1279191

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/312b15c540588c620c758fb68fcad7821ebd0f74

commit 312b15c540588c620c758fb68fcad7821ebd0f74
Author: dpapad <dpapad@chromium.org>
Date: Mon Oct 22 20:21:50 2018

WebUI Polymer 2: Use !important in cr-toast to make ::slotted style take effect.

Specificity of ::slotted() rules is different in Shadow DOM v0 and v1. The latter
is the correct specced behavior, but the code so far relied on the former.

Bug:  896674 
Change-Id: I0eb2fc0925e1cb83db732e89d958acab4a8fc5fb
Reviewed-on: https://chromium-review.googlesource.com/c/1290198
Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#601706}
[modify] https://crrev.com/312b15c540588c620c758fb68fcad7821ebd0f74/ui/webui/resources/cr_elements/cr_toast/cr_toast.html

Update:

Rechecked the above issue on Windows (7, 8, 8.1, 10), Mac (10.13.1, 10.13.6, 10.14.1) and Linux (14.04 LTS) using latest canary version 72.0.3589.0 and the issue is found FIXED.
Hence, adding TE verified labels.

Please refer the attached screen-cast.

Thank You..!!

Deleted: Fixed Video.mp4 1.0 MB

	Fixed Video.mp4 1.0 MB View Download