Issue 6441 - Avoid unnecessary shadow root

include.preload.js

Index: include.preload.js
===================================================================
--- a/include.preload.js
+++ b/include.preload.js
@@ -359,27 +359,35 @@
   {
     // Use Shadow DOM if available as to not mess with with web pages that
     // rely on the order of their own <style> tags (#309). However, creating
     // a shadow root breaks running CSS transitions. So we have to create
     // the shadow root before transistions might start (#452).
     if (!("createShadowRoot" in document.documentElement))
       return null;
 
+    // Use Shadow DOM only on Chrome version 65 and lower. Firefox's Shadow
+    // DOM v0 implementation is slightly different (e.g. no <shadow> element),
+    // while Chrome is deprecating Shadow DOM v0 in favor of Shadow DOM v1 and
+    // user style sheets.

[Sebastian Noack, 2018/03/08 23:22:59]

This is irrelevant. We have feature detection above, and with the change to
<content>, it should be compatible with Firefox as well. The important point,
however, is that we want to avoid creating an unnecessary shadow root, if we can
use user style sheets.

[Manish Jethani, 2018/03/08 23:57:51]

You're right, I've updated the comment.

+    let {application, applicationVersion} = require("info");

[Sebastian Noack, 2018/03/08 23:22:59]

Do we use the "info" module in any other content script? If it's just for the
check here, I'm not sure if it justifies having it added to the bundle.

[Manish Jethani, 2018/03/08 23:57:51]

We don't. OK, I'm checking the navigator.userAgent property directly now.

+    if (application != "chrome" || parseInt(applicationVersion) > 65)

[Sebastian Noack, 2018/03/08 23:22:59]

We don't care about the application, but about the platform.

[Manish Jethani, 2018/03/08 23:57:51]

Acknowledged.

+      return null;
+
     // Using shadow DOM causes issues on some Google websites,
     // including Google Docs, Gmail and Blogger (#1770, #2602, #2687).
     if (/\.(?:google|blogger)\.com$/.test(document.domain))
       return null;
 
     // Finally since some users have both AdBlock and Adblock Plus installed we
     // have to consider how the two extensions interact. For example we want to
     // avoid creating the shadowRoot twice.
     let shadow = document.documentElement.shadowRoot ||
                  document.documentElement.createShadowRoot();
-    shadow.appendChild(document.createElement("shadow"));
+    shadow.appendChild(document.createElement("content"));
 
     return shadow;
   },
 
   addSelectorsInline(selectors, groupName)
   {
     let style = this.styles.get(groupName);