diff --git a/devtools/target.html b/devtools/target.html
index df434da..3acaa45 100644
--- a/devtools/target.html
+++ b/devtools/target.html
@@ -49,6 +49,19 @@
console.log('touch')
})
+
+
+ I'm in the shadow DOM
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
diff --git a/src/domains/DOM.ts b/src/domains/DOM.ts
index adca8c8..5d30cd2 100644
--- a/src/domains/DOM.ts
+++ b/src/domains/DOM.ts
@@ -56,11 +56,43 @@ export function copyTo(params: DOM.CopyToRequest): DOM.CopyToResponse {
}
}
+let isEnable = false
+
export function enable() {
- mutationObserver.observe()
+ isEnable = true
+
+ mutationObserver.disconnect()
+ mutationObserver.observe(document.documentElement)
nodeManager.clear()
}
+function hookAttachShadow() {
+ const origAttachShadow = Element.prototype.attachShadow
+ if (origAttachShadow) {
+ Element.prototype.attachShadow = function (init) {
+ const shadowRoot = origAttachShadow.apply(this, [init])
+ if (!nodeManager.isValidNode(this)) {
+ return shadowRoot
+ }
+
+ ;(this as any).__shadowRoot__ = shadowRoot
+ if (isEnable) {
+ mutationObserver.observe(shadowRoot)
+ const hostId = getNodeId(this)
+ if (hostId) {
+ connector.trigger('DOM.shadowRootPushed', {
+ hostId,
+ root: nodeManager.wrap(shadowRoot, { depth: 1 }),
+ })
+ }
+ }
+ return shadowRoot
+ }
+ }
+}
+
+hookAttachShadow()
+
export function getDocument() {
return {
root: nodeManager.wrap(document, {
diff --git a/src/lib/mutationObserver.ts b/src/lib/mutationObserver.ts
index f1795ad..a410b0c 100644
--- a/src/lib/mutationObserver.ts
+++ b/src/lib/mutationObserver.ts
@@ -9,17 +9,17 @@ class Observer extends Emitter {
each(mutations, mutation => this.handleMutation(mutation))
})
}
- observe() {
- const { observer } = this
-
- observer.disconnect()
- observer.observe(document.documentElement, {
+ observe(node: Node) {
+ this.observer.observe(node, {
attributes: true,
childList: true,
characterData: true,
subtree: true,
})
}
+ disconnect() {
+ this.observer.disconnect()
+ }
private handleMutation(mutation: MutationRecord) {
if (mutation.type === 'attributes') {
this.emit('attributes', mutation.target, mutation.attributeName)
diff --git a/src/lib/nodeManager.ts b/src/lib/nodeManager.ts
index dfefc24..9204912 100644
--- a/src/lib/nodeManager.ts
+++ b/src/lib/nodeManager.ts
@@ -59,6 +59,15 @@ export function wrap(node: any, { depth = 1 } = {}) {
ret.attributes = attributes
}
+ if (node.shadowRoot) {
+ ret.shadowRoots = [wrap(node.shadowRoot, { depth: 1 })]
+ } else if (node.__shadowRoot__) {
+ ret.shadowRoots = [wrap(node.__shadowRoot__, { depth: 1 })]
+ }
+ if (isShadowRoot(node)) {
+ ret.shadowRootType = node.mode || 'user-agent'
+ }
+
const childNodes = filterNodes(node.childNodes)
ret.childNodeCount = childNodes.length
const hasOneTextNode =
@@ -114,9 +123,17 @@ export function isValidNode(node: Node): boolean {
export function getNode(nodeId: number) {
const node = nodes.get(nodeId)
- if (!node || node.nodeType === 10) {
+ if (!node || node.nodeType === 10 || node.nodeType === 11) {
throw createErr(-32000, 'Could not find node with given id')
}
return node
}
+
+function isShadowRoot(node: any) {
+ if (window.ShadowRoot) {
+ return node instanceof ShadowRoot
+ }
+
+ return false
+}