feat: shadow dom support

package.json

@@ -45,7 +45,7 @@
     "autoprefixer": "^9.7.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",
-    "chobitsu": "^1.5.1",
+    "chobitsu": "^1.8.1",
     "core-js": "^3.37.1",
     "css-loader": "^3.4.2",
     "es-check": "^6.2.1",
@@ -65,7 +65,7 @@
     "luna-box-model": "^1.0.0",
     "luna-console": "^1.3.4",
     "luna-data-grid": "^0.6.0",
-    "luna-dom-viewer": "^1.3.0",
+    "luna-dom-viewer": "^1.4.0",
     "luna-modal": "^1.2.3",
     "luna-notification": "^0.3.2",
     "luna-object-viewer": "^0.3.1",

src/Elements/Detail.js

@@ -277,7 +277,9 @@ export default class Detail {
     const events = el.erudaEvents
     if (events && keys(events).length !== 0) ret.listeners = events
 
-    if (needNoStyle(tagName)) return ret
+    if (needNoStyle(tagName)) {
+      return ret
+    }
 
     let computedStyle = cssStore.getComputedStyle()
 
@@ -472,8 +474,9 @@ function rmDefComputedStyle(computedStyle, styles) {
 
 const NO_STYLE_TAG = ['script', 'style', 'meta', 'title', 'link', 'head']
 
-const needNoStyle = (tagName) =>
+const needNoStyle = (tagName) => {
   NO_STYLE_TAG.indexOf(tagName.toLowerCase()) > -1
+}
 
 const wrapLink = (link) => `<a href="${link}" target="_blank">${link}</a>`
 

src/Elements/Elements.js

@@ -15,7 +15,7 @@ import evalCss from '../lib/evalCss'
 import Detail from './Detail'
 import chobitsu from '../lib/chobitsu'
 import emitter from '../lib/emitter'
-import { formatNodeName } from './util'
+import { formatNodeName, isShadowRoot } from './util'
 
 export default class Elements extends Tool {
   constructor() {
@@ -118,7 +118,7 @@ export default class Elements extends Tool {
     if (this._curNode.nodeType === Node.ELEMENT_NODE) {
       this._detail.show(this._curNode)
     } else {
-      this._detail.show(this._curNode.parentNode)
+      this._detail.show(this._curNode.parentNode || this._curNode.host)
     }
   }
   _initTpl() {
@@ -309,8 +309,15 @@ function getCrumbs(el) {
       idx: i++,
     })
 
+    if (isShadowRoot(el)) {
+      el = el.host
+    }
+    if (!el.parentElement && isShadowRoot(el.parentNode)) {
+      el = el.parentNode
+    } else {
       el = el.parentElement
     }
+  }
 
   return ret.reverse()
 }

src/Elements/util.js

@@ -7,6 +7,8 @@ export function formatNodeName(node, { noAttr = false } = {}) {
     return `<span class="${c('tag-name-color')}">(text)</span>`
   } else if (node.nodeType === Node.COMMENT_NODE) {
     return `<span class="${c('tag-name-color')}"><!--></span>`
+  } else if (isShadowRoot(node)) {
+    return `<span class="${c('tag-name-color')}">#shadow-root</span>`
   }
 
   const { id, className, attributes } = node
@@ -34,3 +36,11 @@ export function formatNodeName(node, { noAttr = false } = {}) {
 
   return ret
 }
+
+export function isShadowRoot(node) {
+  if (window.ShadowRoot) {
+    return node instanceof ShadowRoot
+  }
+
+  return false
+}