release: v1.4.2

liriliri · Dec 11, 2022 · a15baab · a15baab
1 parent 8fd956f
commit a15baab
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 1.4.2 (11 Dec 2022)
+
+* fix: dom highlighter style encapsulation
+
 ## 1.4.1 (2 Dec 2022)
 
 * feat: support android 5.0

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chobitsu",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Chrome devtools protocol JavaScript implementation",
   "main": "dist/chobitsu.js",
   "exports": {

diff --git a/src/domains/Overlay.ts b/src/domains/Overlay.ts
@@ -22,26 +22,49 @@ const showInfo = cssSupports(
   'polygon(50% 0px, 0px 100%, 100% 100%)'
 )
 
+const css = require('luna-dom-highlighter/luna-dom-highlighter.css').replace(
+  '/*# sourceMappingURL=luna-dom-highlighter.css.map*/',
+  ''
+)
+
 export function enable() {
   if (isEnable) {
     return
   }
 
-  if (!isCssLoaded) {
-    evalCss(
-      require('luna-dom-highlighter/luna-dom-highlighter.css').replace(
-        '/*# sourceMappingURL=luna-dom-highlighter.css.map*/',
-        ''
-      )
-    )
-    isCssLoaded = true
-  }
   const container = h('div', {
     class: '__chobitsu-hide__',
+    style: {
+      all: 'initial',
+    },
   })
   $container = $(container)
   document.documentElement.appendChild(container)
-  domHighlighter = new LunaDomHighlighter(container, {
+
+  let domHighlighterContainer: HTMLDivElement | null = null
+  let shadowRoot: ShadowRoot | null = null
+  if (container.attachShadow) {
+    shadowRoot = container.attachShadow({ mode: 'open' })
+  } else if ((container as any).createShadowRoot) {
+    shadowRoot = (container as any).createShadowRoot()
+  }
+  if (shadowRoot) {
+    const style = document.createElement('style')
+    style.textContent = css
+    style.type = 'text/css'
+    shadowRoot.appendChild(style)
+    domHighlighterContainer = document.createElement('div')
+    shadowRoot.appendChild(domHighlighterContainer)
+  } else {
+    domHighlighterContainer = document.createElement('div')
+    container.appendChild(domHighlighterContainer)
+    if (!isCssLoaded) {
+      evalCss(css)
+      isCssLoaded = true
+    }
+  }
+
+  domHighlighter = new LunaDomHighlighter(domHighlighterContainer, {
     monitorResize: toBool(root.ResizeObserver),
     showInfo,
   })

diff --git a/src/lib/objManager.ts b/src/lib/objManager.ts
@@ -107,12 +107,8 @@ export function releaseObj(objectId: number) {
 }
 
 export function getProperties(params: any) {
-  const {
-    accessorPropertiesOnly,
-    objectId,
-    ownProperties,
-    generatePreview,
-  } = params
+  const { accessorPropertiesOnly, objectId, ownProperties, generatePreview } =
+    params
   const properties = []
 
   const options = {