Enabled dom.webcomponents & ABP results in blank Firefox screens

[feng]

Environment

OS: Win 10 Pro 64bit Version: 1709 Build: 10.0.16299.248
Browser: Firefox 58.0.2 (64-Bit)
Adblock Plus 3.0.2
Filter: EasyList Germany+EasyList

How to reproduce

1. Enable web components support via about:config and set dom.webcomponents.enabled and dom.webcomponents.customelements.enabled to "true"

2. Make sure ABP is enabled as well.

3. Visit i.e. www.google.com. The page gets loaded but is not visible.

4. Retry step 3 with any webpages you want.

Observed behaviour

The webpages are invisible (blank). This only happens when webcomponents support and ABP are enabled. As soon as I disable ABP I can hit the refresh button on an invisible page and it gets shown.
The same happens if I start browsing without ABP. When I enable ABP in the addon tab, the other tabs which showed content before become suddenly blank.

Expected behaviour

ABP and web components shouldn't conflict :)

[mapx]

I get the blank page when dom.webcomponents.shadowdom.enabled is true

[mjethani]

I haven't looked into the actual reason why this is happening, but in any case our use of Shadow DOM v0 is only meant for older browsers that do not support user style sheets. We can create the shadow DOM lazily here to avoid this issue entirely. I have uploaded a ​patch for this.

[mjethani]

Alright, so Firefox does not support <shadow> ​anymore. We have to use <content> instead. I'll update the patch.

[sebastian]

Once Chrome 66 becomes stable, we should remove any use of Shadow DOM v0. At that time, it will only be leveraged in rare cases (i.e. when using an outdated version of Chrome or for particular element hiding emulation filters), while a shadow root is still created for each document. Simply falling back to a stylesheet in the light DOM should be good enough in these scenarios. Also considering that Chromium will ​drop support for Shadow DOM v0, now where user style sheets are supported.

[sebastian]

Or perhaps a better idea would be to check navigator.userAgent and only create the shadow root for Chromium <66. (Yeah, checking the user agent string is generally a bad idea, but unfortunately feature detection isn't possible here.) That way we can already stop creating an unnecessary shadow root, now, on browsers that support user style sheets, and leave shadow DOM support around for older Chromium versions for an extended period.

[abpbot]

A commit referencing this issue has landed:
​Issue 6441 - Avoid unnecessary shadow root

[Ross]

Fixed. Can no longer reproduce blank screen as described and shadow root is still created in Chrome < 66 (and Opera where Chrome < 66).

Firefox 53 / Firefox 58 / Windows 7
Chrome 49 / 65 / Windows 7
Opera 36 / 51 / Windows 7