| OLD | NEW |
| 1 | 1 |
| 2 { | 2 { |
| 3 "nodeId": 19, | 3 "nodeId": 20, |
| 4 "backendNodeId": "<number>", | 4 "backendNodeId": "<number>", |
| 5 "nodeType": 1, | 5 "nodeType": 1, |
| 6 "nodeName": "BODY", | 6 "nodeName": "BODY", |
| 7 "localName": "body", | 7 "localName": "body", |
| 8 "nodeValue": "", | 8 "nodeValue": "", |
| 9 "childNodeCount": 1, | 9 "childNodeCount": 1, |
| 10 "children": [ | 10 "children": [ |
| 11 { | 11 { |
| 12 "nodeId": 20, | 12 "nodeId": 21, |
| 13 "backendNodeId": "<number>", | 13 "backendNodeId": "<number>", |
| 14 "nodeType": 1, | 14 "nodeType": 1, |
| 15 "nodeName": "DIV", | 15 "nodeName": "DIV", |
| 16 "localName": "div", | 16 "localName": "div", |
| 17 "nodeValue": "", | 17 "nodeValue": "", |
| 18 "childNodeCount": 1, | 18 "childNodeCount": 2, |
| 19 "children": [ | 19 "children": [ |
| 20 { | 20 { |
| 21 "nodeId": 21, | 21 "nodeId": 22, |
| 22 "backendNodeId": "<number>", | 22 "backendNodeId": "<number>", |
| 23 "nodeType": 1, | 23 "nodeType": 1, |
| 24 "nodeName": "DIV", | 24 "nodeName": "DIV", |
| 25 "localName": "div", | 25 "localName": "div", |
| 26 "nodeValue": "", | 26 "nodeValue": "", |
| 27 "childNodeCount": 1, | 27 "childNodeCount": 1, |
| 28 "children": [ | 28 "children": [ |
| 29 { | 29 { |
| 30 "nodeId": 22, | 30 "nodeId": 23, |
| 31 "backendNodeId": "<number>", | 31 "backendNodeId": "<number>", |
| 32 "nodeType": 1, | 32 "nodeType": 1, |
| 33 "nodeName": "DIV", | 33 "nodeName": "DIV", |
| 34 "localName": "div", | 34 "localName": "div", |
| 35 "nodeValue": "", | 35 "nodeValue": "", |
| 36 "childNodeCount": 1, | 36 "childNodeCount": 1, |
| 37 "children": [ | 37 "children": [ |
| 38 { | 38 { |
| 39 "nodeId": 23, | 39 "nodeId": 24, |
| 40 "backendNodeId": "<number>", | 40 "backendNodeId": "<number>", |
| 41 "nodeType": 1, | 41 "nodeType": 1, |
| 42 "nodeName": "IFRAME", | 42 "nodeName": "IFRAME", |
| 43 "localName": "iframe", | 43 "localName": "iframe", |
| 44 "nodeValue": "", | 44 "nodeValue": "", |
| 45 "childNodeCount": 0, | 45 "childNodeCount": 0, |
| 46 "children": [], | 46 "children": [], |
| 47 "attributes": [ | 47 "attributes": [ |
| 48 "src", | 48 "src", |
| 49 "resources/iframe.html" | 49 "resources/shadow-dom-iframe.html" |
| 50 ], | 50 ], |
| 51 "frameId": "???", | 51 "frameId": "???", |
| 52 "contentDocument": { | 52 "contentDocument": { |
| 53 "nodeId": 24, | 53 "nodeId": 25, |
| 54 "backendNodeId": "<number>", | 54 "backendNodeId": "<number>", |
| 55 "nodeType": 9, | 55 "nodeType": 9, |
| 56 "nodeName": "#document", | 56 "nodeName": "#document", |
| 57 "localName": "", | 57 "localName": "", |
| 58 "nodeValue": "", | 58 "nodeValue": "", |
| 59 "childNodeCount": 1, | 59 "childNodeCount": 1, |
| 60 "children": [ | 60 "children": [ |
| 61 { | 61 { |
| 62 "nodeId": 25, | 62 "nodeId": 26, |
| 63 "backendNodeId": "<number>", | 63 "backendNodeId": "<number>", |
| 64 "nodeType": 1, | 64 "nodeType": 1, |
| 65 "nodeName": "HTML", | 65 "nodeName": "HTML", |
| 66 "localName": "html", | 66 "localName": "html", |
| 67 "nodeValue": "", | 67 "nodeValue": "", |
| 68 "childNodeCount": 2, | 68 "childNodeCount": 2, |
| 69 "children": [ | 69 "children": [ |
| 70 { | 70 { |
| 71 "nodeId": 26, | 71 "nodeId": 27, |
| 72 "backendNodeId": "<numbe
r>", | 72 "backendNodeId": "<numbe
r>", |
| 73 "nodeType": 1, | 73 "nodeType": 1, |
| 74 "nodeName": "HEAD", | 74 "nodeName": "HEAD", |
| 75 "localName": "head", | 75 "localName": "head", |
| 76 "nodeValue": "", | 76 "nodeValue": "", |
| 77 "childNodeCount": 0, | 77 "childNodeCount": 0, |
| 78 "children": [], | 78 "children": [], |
| 79 "attributes": [] | 79 "attributes": [] |
| 80 }, | 80 }, |
| 81 { | 81 { |
| 82 "nodeId": 27, | 82 "nodeId": 28, |
| 83 "backendNodeId": "<numbe
r>", | 83 "backendNodeId": "<numbe
r>", |
| 84 "nodeType": 1, | 84 "nodeType": 1, |
| 85 "nodeName": "BODY", | 85 "nodeName": "BODY", |
| 86 "localName": "body", | 86 "localName": "body", |
| 87 "nodeValue": "", | 87 "nodeValue": "", |
| 88 "childNodeCount": 1, | 88 "childNodeCount": 2, |
| 89 "children": [ | 89 "children": [ |
| 90 { | 90 { |
| 91 "nodeId": 28, | 91 "nodeId": 29, |
| 92 "backendNodeId":
"<number>", | 92 "backendNodeId":
"<number>", |
| 93 "nodeType": 1, | 93 "nodeType": 1, |
| 94 "nodeName": "DIV
", | 94 "nodeName": "DIV
", |
| 95 "localName": "di
v", | 95 "localName": "di
v", |
| 96 "nodeValue": "", | 96 "nodeValue": "", |
| 97 "childNodeCount"
: 0, | 97 "childNodeCount"
: 0, |
| 98 "children": [], | 98 "children": [], |
| 99 "attributes": [ | 99 "attributes": [ |
| 100 "id", | 100 "id", |
| 101 "element_in_
an_iframe" | 101 "element_in_
an_iframe" |
| 102 ], |
| 103 "shadowRoots": [ |
| 104 { |
| 105 "nodeId"
: 30, |
| 106 "backend
NodeId": "<number>", |
| 107 "nodeTyp
e": 11, |
| 108 "nodeNam
e": "#document-fragment", |
| 109 "localNa
me": "", |
| 110 "nodeVal
ue": "", |
| 111 "childNo
deCount": 1, |
| 112 "childre
n": [ |
| 113 { |
| 114
"nodeId": 31, |
| 115
"backendNodeId": "<number>", |
| 116
"nodeType": 1, |
| 117
"nodeName": "DIV", |
| 118
"localName": "div", |
| 119
"nodeValue": "", |
| 120
"childNodeCount": 1, |
| 121
"children": [ |
| 122
{ |
| 123
"nodeId": 32, |
| 124
"backendNodeId": "<number>", |
| 125
"nodeType": 1, |
| 126
"nodeName": "H1", |
| 127
"localName": "h1", |
| 128
"nodeValue": "", |
| 129
"childNodeCount": 1, |
| 130
"children": [ |
| 131
{ |
| 132
"nodeId": 33, |
| 133
"backendNodeId": "<number>", |
| 134
"nodeType": 3, |
| 135
"nodeName": "#text", |
| 136
"localName": "", |
| 137
"nodeValue": "Hello from the shadow dom!" |
| 138
} |
| 139
], |
| 140
"attributes": [] |
| 141
} |
| 142
], |
| 143
"attributes": [ |
| 144
"style", |
| 145
"color: red;" |
| 146
] |
| 147 } |
| 148 ], |
| 149 "shadowR
ootType": "open" |
| 150 } |
| 102 ] | 151 ] |
| 152 }, |
| 153 { |
| 154 "nodeId": 34, |
| 155 "backendNodeId":
"<number>", |
| 156 "nodeType": 1, |
| 157 "nodeName": "SCR
IPT", |
| 158 "localName": "sc
ript", |
| 159 "nodeValue": "", |
| 160 "childNodeCount"
: 1, |
| 161 "children": [ |
| 162 { |
| 163 "nodeId"
: 35, |
| 164 "backend
NodeId": "<number>", |
| 165 "nodeTyp
e": 3, |
| 166 "nodeNam
e": "#text", |
| 167 "localNa
me": "", |
| 168 "nodeVal
ue": "\nfunction addShadowDOM() {\n var host = document.getElementById(\"elem
ent_in_an_iframe\").createShadowRoot();\n var template = document.querySelect
or(\"#shadow-template\");\n host.appendChild(template.content);\n template
.remove();\n}\n" |
| 169 } |
| 170 ], |
| 171 "attributes": [] |
| 103 } | 172 } |
| 104 ], | 173 ], |
| 105 "attributes": [] | 174 "attributes": [ |
| 175 "onload", |
| 176 "addShadowDOM()" |
| 177 ] |
| 106 } | 178 } |
| 107 ], | 179 ], |
| 108 "attributes": [], | 180 "attributes": [], |
| 109 "frameId": "???" | 181 "frameId": "???" |
| 110 } | 182 } |
| 111 ], | 183 ], |
| 112 "documentURL": "???", | 184 "documentURL": "???", |
| 113 "baseURL": "???", | 185 "baseURL": "???", |
| 114 "xmlVersion": "" | 186 "xmlVersion": "" |
| 115 } | 187 } |
| 116 } | 188 } |
| 117 ], | 189 ], |
| 118 "attributes": [ | 190 "attributes": [ |
| 119 "id", | 191 "id", |
| 120 "depth-3" | 192 "depth-3" |
| 121 ] | 193 ] |
| 122 } | 194 } |
| 123 ], | 195 ], |
| 124 "attributes": [ | 196 "attributes": [ |
| 125 "id", | 197 "id", |
| 126 "depth-2" | 198 "depth-2" |
| 127 ] | 199 ] |
| 200 }, |
| 201 { |
| 202 "nodeId": 36, |
| 203 "backendNodeId": "<number>", |
| 204 "nodeType": 1, |
| 205 "nodeName": "DIV", |
| 206 "localName": "div", |
| 207 "nodeValue": "", |
| 208 "childNodeCount": 0, |
| 209 "children": [], |
| 210 "attributes": [ |
| 211 "id", |
| 212 "targetDiv" |
| 213 ] |
| 128 } | 214 } |
| 129 ], | 215 ], |
| 130 "attributes": [ | 216 "attributes": [ |
| 131 "id", | 217 "id", |
| 132 "depth-1" | 218 "depth-1" |
| 133 ] | 219 ] |
| 134 } | 220 } |
| 135 ], | 221 ], |
| 136 "attributes": [] | 222 "attributes": [] |
| 137 } | 223 } |
| 138 | 224 |
| OLD | NEW |