Bug 158550 - Cannot attach Shadow root to unregistered custom element name
Summary: Cannot attach Shadow root to unregistered custom element name
Status: RESOLVED WONTFIX
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks: 148695
  Show dependency treegraph
 
Reported: 2016-06-08 17:06 PDT by Eric
Modified: 2016-06-09 15:38 PDT (History)
3 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Eric 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.
Comment 1 Ryosuke Niwa 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.
Comment 2 Ryosuke Niwa 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).
Comment 3 Eric 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.
Comment 4 Ryosuke Niwa 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.
Comment 5 Ryosuke Niwa 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.
Comment 6 Eric 2016-06-08 21:56:16 PDT
Good catch. Confirmed it's WAI. Thanks for the tip about the inspector.
Comment 7 Rune Lillesveen 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.
Comment 8 Ryosuke Niwa 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.