Issue metadata
Sign in to add a comment
|
Web Component CSS :host-context broke in Chrome 50
Reported by
marcglas...@gmail.com,
Apr 19 2016
|
||||||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36
Example URL:
Steps to reproduce the problem:
1. HTML: <div class="a"><span><test-x>Hello</test-x></span></div>
2. CSS: :host-context(.a):host-context(span) { color: red }
What is the expected behavior?
Web-component test-x should have red text.
What went wrong?
Before Chrome 50 we could concatenate more than one :host-context, like shown in the CSS:
:host-context(.a):host-context(span) { color: red }
This would match only if ALL host-contexts were matched. In my example, only if <text-x> was inside BOTH an element with class="a" AND a span.
This should match:
<div class="a"><span><test-x>Hello</test-x></span></div>
This should NOT match:
<div class="a"><test-x>Hello</test-x></div>
Now, in Chrome 50, it never matches.
Does it occur on multiple sites: Yes
Is it a problem with a plugin? No
Did this work before? Yes Chrome 49
Does this work in other browsers? Yes
Chrome version: 50.0.2661.75 Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 21.0 r0
I believe this makes :host-context much less useful. It broke many of my components, and there is no way to fix it without JavaScript that traverses all parents of the element.
,
Apr 19 2016
I'll mark this as Blink>WebComponents, but I don't actually see this working in either M49 or in Safari or Firefox. I tried to dump your example into https://jsfiddle.net/g1jto5u2/ However, I know nothing about :host-context(), so I have no idea if I'm missing something or not. Let me know if I misunderstood you.
,
Apr 19 2016
Thank you. I will fix this JSFiddle for you. Since test-x is a web-component you must declare it as such. Also there is a related bug when doing :host-context(.a):host(.b) which also stopped working. I will add that as well. I was going through Chrome 50 list of fixes, and I noticed where this modification was done. It seems they decided to ignore any CSS rules to the left of any :host or :host-content, which makes no sense.
,
Apr 19 2016
This shows the problem:
https://jsfiddle.net/g1jto5u2/1/
,
Apr 19 2016
hm. I see two lines of red followed by two lines of black in the new fiddle, on M49 and the current M52 Canary on Mac (52.0.2712.0). Maybe this was broken in M50 but subsequently fixed?
,
Apr 19 2016
Maybe this is the problem:
https://codereview.chromium.org/1695393002
..."Similarly, nothing left of :host or :host-context will ever match, so
we can treat those the same way. Selectors like "div + :host" or
":only-child:host-context(.a)" will never match. There is nothing in
the CSS Scoping spec which says they're invalid"...
Other changes that might be related:
https://codereview.chromium.org/1703893002
https://codereview.chromium.org/1683923003
The list of all changes is here:
https://chromium.googlesource.com/chromium/src/+log/49.0.2623.112..50.0.2661.75?pretty=fuller&n=10000
,
Apr 19 2016
sounds plausible.
,
Apr 19 2016
I have submitted another related bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=604939
,
Apr 19 2016
Was it fixed after M50? It did not occurred to me to check the Canary. I will download it right away (for Windows), and see what happens.
,
Apr 19 2016
You are right! It is fixed in Chrome 52 for Windows. What a waste of my time, and yours. Ok, lesson learned: always test the Canary before filling bug reports. I believe this issue may be closed, and the other related one too. Sorry.
,
Apr 19 2016
no problem! It's good to file bugs anyway so that there's a record if other people are seeing the same thing.
,
Apr 20 2016
Thanks markglasberg and dpranke for reporting the details. I'll take a look at this today.
,
Apr 20 2016
|
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by marcglas...@gmail.com
, Apr 19 2016I don't know how to change that, but this issue should be marked as: Components: Blink>WebComponents