Dev: Use shadow dom to encapsulate css

README.md

@@ -99,7 +99,8 @@ document.body.appendChild(el);
 
 eruda.init({
     container: el,
-    tool: ['console', 'elements']
+    tool: ['console', 'elements'],
+    useShadowDom: true // Use shadow dom to prevent page css affecting eruda.
 });
 ```
 

doc/README_CN.md

@@ -85,7 +85,8 @@ document.body.appendChild(el);
 
 eruda.init({
     container: el,
-    tool: ['console', 'elements']
+    tool: ['console', 'elements'],
+    useShadowDom: true
 });
 ```
 

src/index.js

@@ -29,12 +29,12 @@ import {
 } from './lib/util';
 
 module.exports = {
-    init({container, tool, autoScale = true} = {})
+    init({container, tool, autoScale = true, useShadowDom = true} = {})
     {
         this._isInit = true;
         this._scale = 1;
 
-        this._initContainer(container);
+        this._initContainer(container, useShadowDom);
         this._initStyle();
         this._initDevTools();
         this._initEntryBtn();
@@ -137,7 +137,7 @@ module.exports = {
         if (!this._isInit) logger.error('Please call "eruda.init()" first');
         return this._isInit;
     },
-    _initContainer(el)
+    _initContainer(el, useShadowDom)
     {
         if (!el)
         {
@@ -145,6 +145,28 @@ module.exports = {
             document.documentElement.appendChild(el);
         }
 
+        let shadowRoot;
+        if (useShadowDom) 
+        {
+            if (el.attachShadow)
+            {
+                shadowRoot = el.attachShadow({mode: 'open'});
+            } else if (el.createShadowRoot) 
+            {
+                shadowRoot = el.createShadowRoot();
+            }
+            if (shadowRoot) 
+            {
+                // font-face doesn't work inside shadow dom.
+                evalCss.container = document.head;
+                evalCss(require('./style/icon.css'));
+
+                el = document.createElement('div');
+                shadowRoot.appendChild(el);
+                this._shadowRoot = shadowRoot;
+            }
+        }
+
         Object.assign(el, {
             id: 'eruda',
             className: 'eruda-container',
@@ -165,9 +187,16 @@ module.exports = {
         let className = 'eruda-style-container',
             $el = this._$el;
 
-        $el.append(`<div class="${className}"></div>`);
+        if (this._shadowRoot) 
+        {
+            evalCss.container = this._shadowRoot;
+            evalCss(':host { all: initial }');
+        } else 
+        {
+            $el.append(`<div class="${className}"></div>`);
+            evalCss.container = $el.find(`.${className}`).get(0);
+        }
 
-        evalCss.container = $el.find(`.${className}`).get(0);
         evalCss(
             require('./style/style.scss') +
             require('./style/reset.scss') +

test/boot.js

@@ -3,7 +3,9 @@ function boot(name, cb)
     // Need a little delay to make sure width and height of webpack dev server iframe are initialized.
     setTimeout(function ()
     {
-        var options = {};
+        var options = {
+            useShadowDom: false
+        };
         if (name) 
         {
             options.tool = name === 'settings' ? [] : name;

test/eruda.js

@@ -17,7 +17,8 @@ describe('devTools', function ()
 
             eruda.init({
                 container: container,
-                tool: []
+                tool: [],
+                useShadowDom: false
             });
 
             var $eruda = $('#eruda');

test/index.html

@@ -50,7 +50,10 @@
         setTimeout(function () {
             try 
             {
-                eruda.init({container: el});
+                eruda.init({
+                    container: el,
+                    useShadowDom: false
+                });
             } catch (e) 
             {
                 alert(e);

test/init.js

@@ -1 +1,3 @@
-eruda.init();
+eruda.init({ 
+    useShadowDom: false 
+});

test/manual.html

@@ -6,7 +6,6 @@
     <title>Manual</title>
     <link rel="stylesheet" href="style.css">
     <script src="assets/eruda.js"></script>
-    <script src="boot.js"></script>
     <script src="util.js"></script>
 </head>
 <body>
@@ -34,6 +33,9 @@
         <li>
             <a href="#" id="big-array">Big Array</a>
         </li>
+        <li>
+            <a href="#" id="override-style">Override Style</a>
+        </li>
     </ul>
 </nav>
 <script>
@@ -110,7 +112,14 @@
         }
         console.log(arr);
     });
+    addClickEvent('override-style', function () 
+    {
+        util.evalCss('.eruda-nav-bar {background: red !important;}');
+    });
+</script>
+<script>
+    eruda.init();
+    eruda.show();
 </script>
-<script>boot();</script>
 </body>
 </html>