[WebComponents] Inconsistent rendering with scoped style in shadow dom

NEW
Assigned to

Status

()

Core
DOM
3 years ago
3 years ago

People

(Reporter: Yan Or, Assigned: wchen)

Tracking

(Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments, 2 obsolete attachments)

25 bytes, text/css
Details
24 bytes, text/css
Details
673 bytes, text/html
Details
(Reporter)

Description

3 years ago
Created attachment 8414605 [details]
demo.html

When using imported scoped stylesheet inside template, elements inside shadow dom sometimes aren't rendered correctly.

This does not happen with inline styles.

Sample code attached with video showing inconsistent rendering on repeat page refresh.
(Reporter)

Comment 1

3 years ago
Created attachment 8414606 [details]
blue.css
(Reporter)

Comment 2

3 years ago
Created attachment 8414607 [details]
red.css
(Reporter)

Comment 3

3 years ago
Created attachment 8414610 [details]
Video
(Reporter)

Comment 4

3 years ago
Comment on attachment 8414610 [details]
Video

https://www.youtube.com/watch?v=CSUfBdFNQpg&feature=youtu.be
(Reporter)

Updated

3 years ago
Attachment #8414610 - Attachment is obsolete: true
(Reporter)

Updated

3 years ago
Blocks: 811542

Comment 5

3 years ago
Is the plan even to support <style scoped>?
See also https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/R1x18ZLS5qQ
(Reporter)

Updated

3 years ago
Attachment #8414605 - Attachment is obsolete: true
(Reporter)

Comment 6

3 years ago
Created attachment 8414912 [details]
demo.html
(Reporter)

Comment 7

3 years ago
(In reply to Olli Pettay [:smaug] from comment #5)
> Is the plan even to support <style scoped>?
> See also
> https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/R1x18ZLS5qQ

The same behavior is observed without "scoped".
Blocks: 1008187
As far as I know we already have scoped stylesheets implemented.
(Reporter)

Comment 9

3 years ago
Also, as I've mentioned before, we observed the same behavior even without scoped.
(Assignee)

Comment 10

3 years ago
I've got a fix for this locally. The problem here is related to @import not working in ShadowRoot due the style sheet not being put into the document.
Assignee: nobody → wchen

Comment 11

3 years ago
It seems that Bug 997173 is on the same problem. Is there anyone can confirm whether I  	
mark that as duplicate?
(Reporter)

Comment 12

3 years ago
(In reply to SUN Haitao from comment #11)
> It seems that Bug 997173 is on the same problem. Is there anyone can confirm
> whether I  	
> mark that as duplicate?

Yup.  It's the same problem.

William, any idea when the fix will be ready?

Updated

3 years ago
Duplicate of this bug: 997173
William told me that one of the patches in bug 992521 will fix this issue.
Not sure the patches in that bug will make <style scoped> as a child of ShadowTree work as you'd expect.  Various bits of the scoped style sheet code expects the scope to be an Element (the ElementIsStyleScopeRoot flag is on Element, the array on TreeMatchContext is an array of Elements, etc.).
(But that might not be the exact issue here.)  Patches in bug 1017798 should help with some aspects of scoped style interacting with shadow trees.
Depends on: 1017798

Comment 17

3 years ago
The testcases in this and Bug 997173 both work fine on my box now. Could this be closed?
You need to log in before you can comment on or make changes to this bug.