{"ScriptPreparationCode":"// language=HTML\r\nconst html = \u0060\r\n\u003Cbody\u003E\r\n \u003Ch1\u003EDoc with mix of light and shadow DOM custom elements\u003C/h1\u003E\r\n \u003Cp\u003ENOTE: we rely on Chrome\u0027s support for \u0022declarative shadow DOM\u0022\u003C/p\u003E\r\n \u003Cx-light id=\u00221\u0022\u003E\r\n \u003C!-- comment --\u003E\r\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum deserunt\r\n dolor nesciunt ab placeat nostrum. Laborum rem quisquam ullam, officiis\r\n maiores fugiat fuga animi quos. Ex earum a alias magni.\r\n \u003C/x-light\u003E\r\n \u003Cx-shadow id=\u00222\u0022\u003E\r\n \u003Ctemplate shadowroot=\u0022open\u0022\u003E\r\n \u003C!-- comment --\u003E\r\n \u003Cp\u003E\r\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam amet\r\n error delectus...\r\n \u003C/p\u003E\r\n \u003Cslot\u003E\u003C/slot\u003E\r\n \u003C/template\u003E\r\n \u003C!-- comment --\u003E\r\n Impedit nesciunt excepturi perferendis quis in debitis vitae soluta\r\n voluptatibus praesentium repellat labore quas. Cum unde consectetur\r\n maiores.\r\n \u003C/x-shadow\u003E\r\n \u003Cx-light id=\u00223\u0022\u003E\r\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum deserunt\r\n dolor nesciunt ab placeat nostrum. Laborum rem quisquam ullam, officiis\r\n maiores fugiat fuga animi quos. Ex earum a alias magni.\r\n \u003Cx-light id=\u00223.1\u0022\u003E\r\n \u003Cspan\u003ELorem ipsum dolor sit amet\u003C/span\u003E consectetur adipisicing elit.\r\n Rerum deserunt dolor nesciunt ab placeat nostrum. Laborum rem quisquam\r\n ullam, officiis maiores fugiat fuga animi quos. Ex earum a alias magni.\r\n \u003Cx-light id=\u00223.1.1\u0022\u003E\r\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum\r\n deserunt dolor nesciunt ab placeat nostrum. Laborum rem quisquam\r\n ullam, officiis maiores fugiat fuga animi quos. Ex earum a alias\r\n magni.\r\n \u003C/x-light\u003E\r\n \u003C/x-light\u003E\r\n \u003C/x-light\u003E\r\n \u003Cx-shadow id=\u00224\u0022\u003E\r\n \u003Ctemplate shadowroot=\u0022open\u0022\u003E\r\n \u003Cx-shadow id=\u00224.1\u0022\u003E\r\n \u003Ctemplate shadowroot=\u0022open\u0022\u003E\r\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam amet\r\n error delectus...\r\n \u003Cslot\u003E\u003C/slot\u003E\r\n \u003Cx-shadow id=\u00224.1.1\u0022\u003E\r\n \u003Ctemplate shadowroot=\u0022open\u0022\u003E\r\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam\r\n amet error delectus...\r\n \u003Cslot\u003E\u003C/slot\u003E\r\n \u003C/template\u003E\r\n Impedit nesciunt excepturi perferendis quis in debitis vitae\r\n soluta voluptatibus praesentium repellat labore quas. Cum unde\r\n consectetur maiores.\r\n \u003Cx-light id=\u00224.1.1.1\u0022\u003E\r\n \u003Cp\u003E\r\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum\r\n deserunt dolor nesciunt ab placeat nostrum. Laborum rem\r\n quisquam ullam, officiis maiores fugiat fuga animi quos. Ex\r\n earum a alias magni.\r\n \u003C/p\u003E\r\n \u003C/x-light\u003E\r\n \u003C/x-shadow\u003E\r\n \u003C/template\u003E\r\n Impedit nesciunt excepturi perferendis quis in debitis vitae soluta\r\n voluptatibus praesentium repellat labore quas. Cum unde consectetur\r\n maiores.\r\n \u003C/x-shadow\u003E\r\n \u003Cslot\u003E\u003C/slot\u003E\r\n \u003C/template\u003E\r\n \u003Cx-shadow id=\u00225\u0022\u003E\r\n \u003Ctemplate shadowroot=\u0022open\u0022\u003E\r\n Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam amet\r\n error delectus...\r\n \u003Cslot\u003E\u003C/slot\u003E\r\n \u003C/template\u003E\r\n Impedit nesciunt excepturi perferendis quis in debitis vitae soluta\r\n voluptatibus praesentium repellat labore quas. Cum unde consectetur\r\n maiores.\r\n \u003C/x-shadow\u003E\r\n \u003C/x-shadow\u003E\r\n\u003C/body\u003E\r\n\u0060;\r\nconst fragment = new DOMParser().parseFromString(html, \u0027text/html\u0027, {\r\n\tincludeShadowRoots: true\r\n});\r\ndocument.body.replaceChildren(fragment.body);\r\nwindow.testTraverse = function traverse(node, use) {\r\n if (!node) return;\r\n\r\n use(node);\r\n traverse(node.firstChild, use);\r\n traverse(node.nextSibling, use);\r\n}","TestCases":[{"Name":"Traverse function","Code":"const customEls = [];\r\nconst func = node =\u003E {\r\n if (node.nodeType === Node.ELEMENT_NODE \u0026\u0026 node.tagName.includes(\u0027-\u0027)) {\r\n customEls.push(node);\r\n }\r\n \r\n if (node.shadowRoot) {\r\n testTraverse(node.shadowRoot.firstChild, func)\r\n }\r\n}\r\ntestTraverse(document.body.firstChild, func);\r\nconsole.log(customEls)","IsDeferred":false},{"Name":"NodeIterator","Code":"function getAllCustomElementsUsingNodeIterator(root = document.body) {\r\n const elms = []\r\n let currentNode\r\n const nodeIterator = document.createNodeIterator(\r\n root,\r\n NodeFilter.SHOW_ELEMENT,\r\n null\r\n )\r\n\r\n while ((currentNode = nodeIterator.nextNode())) {\r\n if (currentNode.tagName.includes(\u0027-\u0027)) {\r\n elms.push(currentNode)\r\n\r\n if (currentNode.shadowRoot) {\r\n elms.push(...getAllCustomElementsUsingNodeIterator(currentNode.shadowRoot))\r\n }\r\n }\r\n }\r\n\r\n return elms\r\n}\r\n\r\nconsole.log(getAllCustomElementsUsingNodeIterator())\r\n","IsDeferred":false},{"Name":"TreeWalker","Code":"function getAllCustomElementsUsingTreeWalker(root = document.body) {\r\n const elms = []\r\n let currentNode\r\n const treeWalker = document.createTreeWalker(\r\n root,\r\n NodeFilter.SHOW_ELEMENT,\r\n null\r\n )\r\n\r\n while ((currentNode = treeWalker.nextNode())) {\r\n if (currentNode.tagName.includes(\u0027-\u0027)) {\r\n elms.push(currentNode)\r\n\r\n if (currentNode.shadowRoot) {\r\n elms.push(...getAllCustomElementsUsingTreeWalker(currentNode.shadowRoot))\r\n }\r\n }\r\n }\r\n\r\n return elms\r\n}\r\n\r\nconsole.log(getAllCustomElementsUsingTreeWalker())\r\n","IsDeferred":false}]}