Bug 158550 – Cannot attach Shadow root to unregistered custom element name

• Component: DOM
• Status: RESOLVED WONTFIX

[Eric]

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.

[Ryosuke Niwa]

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]

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]

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]

(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]

Created attachment 280882 [details]
screenshot of inspector

For showing inspector, click on "<>" icon next to a button that enables composition layers.

[Eric]

Good catch. Confirmed it's WAI. Thanks for the tip about the inspector.

[Rune Lillesveen]

(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]

(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.