Bug 158550

Summary: Cannot attach Shadow root to unregistered custom element name
Product: WebKit Reporter: Eric <ericbidelman>
Component: DOMAssignee: Nobody <webkit-unassigned>
Status: RESOLVED WONTFIX    
Severity: Normal CC: cdumez, rniwa, rune
Priority: P2    
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
Reduction
none
screenshot of inspector none

Eric
Reported 2016-06-08 17:06:15 PDT
Repo: 1. Visit http://jsbin.com/kowodikoyo/edit?html,output in Safari TP version 9.1.2 (11601.7.4, 11602.1.35), or Webkit Nightly Version 9.1.1 (11601.6.17, r201834) 2. Click the pink button. Expected: A ripple animation where you click. Actual: Running the same demo (http://jsbin.com/kowodikoyo/edit?html,output) in Chrome Canary 52.0.2762.0 works as expected. The ripple animation plays. It appears that attachShadowRoot is not working with a viable custom element name. Changing better-button -> div makes the demo work in Safari TP and WK Nightly.
Attachments
Reduction (380 bytes, text/html)
2016-06-08 20:27 PDT, Ryosuke Niwa 		no flags
Details
screenshot of inspector (8.82 KB, image/png)
2016-06-08 21:47 PDT, Ryosuke Niwa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Ryosuke Niwa
Comment 1 2016-06-08 20:07:33 PDT
Well the button is rendered correctly before being clicked so I don't think there is any issue with shadow DOM. It looks like the problem is `z-index: -1` in `.ripple`. Because of that, the "ripple" div is drawn below the content. I *think* our behavior is correct here, and the fact z-index is ignored in Chrome is probably a bug in Blink.
Ryosuke Niwa
Comment 2 2016-06-08 20:27:09 PDT
Created attachment 280877 [details] Reduction It looks like this is an artifact of "contain: content". That's somehow forcing the background color to be painted behind content with a negative z-index. You may want to file a Blink bug with this reduction (please note that the test case is BSD licensed by Apple if you were to post it on Chromium issue tracker).
Eric
Comment 3 2016-06-08 21:42:01 PDT
Removing the `z-index: -1` in my jsbin does do the trick for TP, but I'm curious why just changing the tag name to <div> also fixes it: http://jsbin.com/sabayuyila/edit?html,output That should make no difference, but it does. It's also confusing that the inspector doesn't render a shadow root: http://prntscr.com/be57v6. Happy to file another but on that if you think it's an issue.
Ryosuke Niwa
Comment 4 2016-06-08 21:45:36 PDT
(In reply to comment #3) > Removing the `z-index: -1` in my jsbin does do the trick for TP, but I'm > curious why just changing the tag name to <div> also fixes it: > > http://jsbin.com/sabayuyila/edit?html,output > > That should make no difference, but it does. > > It's also confusing that the inspector doesn't render a shadow root: > http://prntscr.com/be57v6. Happy to file another but on that if you think > it's an issue. That version doesn't have z-index: -1. I've tested this manny times so I'm pretty certain there is no behavioral difference between div and better-button in this example.
Ryosuke Niwa
Comment 5 2016-06-08 21:47:04 PDT
Created attachment 280882 [details] screenshot of inspector For showing inspector, click on "<>" icon next to a button that enables composition layers.
Eric
Comment 6 2016-06-08 21:56:16 PDT
Good catch. Confirmed it's WAI. Thanks for the tip about the inspector.
Rune Lillesveen
Comment 7 2016-06-09 15:26:56 PDT
(In reply to comment #2) > Created attachment 280877 [details] > Reduction > > It looks like this is an artifact of "contain: content". That's somehow > forcing the background color to be painted behind content with a negative > z-index. contain:content, which includes paint containment, establishes a new stacking context as per https://drafts.csswg.org/css-containment/#paint-containment which makes the positioned descendant with negative z-index paint of top of the outer element's background.
Ryosuke Niwa
Comment 8 2016-06-09 15:38:40 PDT
(In reply to comment #7) > (In reply to comment #2) > > Created attachment 280877 [details] > > Reduction > > > > It looks like this is an artifact of "contain: content". That's somehow > > forcing the background color to be painted behind content with a negative > > z-index. > > contain:content, which includes paint containment, establishes a new > stacking context as per > https://drafts.csswg.org/css-containment/#paint-containment which makes the > positioned descendant with negative z-index paint of top of the outer > element's background. Ah, okay so this was really a bug in the content that relied on that behavior in browsers that don't support contain: content.
Note You need to log in before you can comment on or make changes to this bug.