OPTI-11125 add nested shadow dom with style rule example

[anhnicky66]

• yarn install
• yarn serve
• Go to http://localhost:8000/data-collector.html
• Only the nested custom element has the red text style
  
• Click Collect Data
• It will output this

{
  "dom_tree": {
    "tn": "HTML",
    "ci": 0,
    "a": [
      [
        "lang",
        "en"
      ]
    ],
    "c": [
      {
        "tn": "HEAD",
        "ci": 1,
        "a": [],
        "c": [
          {
            "t": "\n "
          },
          {
            "tn": "META",
            "ci": 1,
            "a": [
              [
                "charset",
                "UTF-8"
              ]
            ]
          },
          {
            "t": "\n "
          },
          {
            "tn": "META",
            "ci": 1,
            "a": [
              [
                "name",
                "viewport"
              ],
              [
                "content",
                "width=device-width, initial-scale=1.0"
              ]
            ]
          },
          {
            "t": "\n "
          },
          {
            "tn": "TITLE",
            "ci": 1,
            "a": [],
            "c": [
              {
                "t": "Data Collector"
              }
            ]
          },
          {
            "t": "\n "
          },
          {
            "t": "\n "
          },
          {
            "t": "\n"
          }
        ]
      },
      {
        "t": "\n"
      },
      {
        "tn": "BODY",
        "ci": 2,
        "a": [],
        "c": [
          {
            "t": "\n "
          },
          {
            "tn": "H2",
            "ci": 3,
            "a": [],
            "c": [
              {
                "t": "Data collector"
              }
            ]
          },
          {
            "t": "\n "
          },
          {
            "t": "\n "
          },
          {
            "tn": "BUTTON",
            "ci": 4,
            "a": [
              [
                "type",
                "button"
              ],
              [
                "id",
                "collectBtn"
              ]
            ],
            "c": [
              {
                "t": "Collect data"
              }
            ]
          },
          {
            "t": "\n "
          },
          {
            "tn": "PRE",
            "ci": 5,
            "a": [
              [
                "id",
                "data_collector_output"
              ]
            ]
          },
          {
            "t": "\n "
          },
          {
            "tn": "MY-ELEMENT",
            "ci": 6,
            "a": [],
            "sr": {
              "c": [
                {
                  "t": "\n "
                },
                {
                  "tn": "DIV",
                  "ci": 7,
                  "a": [
                    [
                      "class",
                      "wrapper"
                    ]
                  ],
                  "c": [
                    {
                      "t": "\n "
                    },
                    {
                      "tn": "HEADER",
                      "ci": 8,
                      "a": [],
                      "c": [
                        {
                          "t": "\n Hi!\n "
                        }
                      ]
                    },
                    {
                      "t": "\n "
                    },
                    {
                      "tn": "MAIN",
                      "ci": 8,
                      "a": [],
                      "c": [
                        {
                          "t": "\n "
                        },
                        {
                          "tn": "SLOT",
                          "ci": 9,
                          "a": [
                            [
                              "name",
                              "main"
                            ]
                          ]
                        },
                        {
                          "t": "\n "
                        }
                      ]
                    },
                    {
                      "t": "\n "
                    },
                    {
                      "tn": "DIV",
                      "ci": 10,
                      "a": [
                        [
                          "hidden",
                          ""
                        ]
                      ],
                      "c": [
                        {
                          "t": "\n Some content\n "
                        }
                      ]
                    },
                    {
                      "t": "\n "
                    }
                  ]
                },
                {
                  "t": "\n "
                }
              ]
            },
            "c": [
              {
                "t": "\n "
              },
              {
                "tn": "DIV",
                "ci": 8,
                "a": [
                  [
                    "slot",
                    "main"
                  ]
                ],
                "c": [
                  {
                    "t": "This is a custom element"
                  }
                ]
              },
              {
                "t": "\n "
              },
              {
                "tn": "P",
                "ci": 11,
                "a": [
                  [
                    "class",
                    "nest-text-red"
                  ]
                ],
                "c": [
                  {
                    "t": "with some content"
                  }
                ]
              },
              {
                "t": "\n "
              }
            ]
          },
          {
            "t": "\n "
          },
          {
            "tn": "MY-ELEMENT",
            "ci": 6,
            "a": [],
            "sr": {
              "c": [
                {
                  "t": "\n "
                },
                {
                  "tn": "DIV",
                  "ci": 12,
                  "a": [
                    [
                      "class",
                      "wrapper"
                    ]
                  ],
                  "c": [
                    {
                      "t": "\n "
                    },
                    {
                      "tn": "HEADER",
                      "ci": 8,
                      "a": [],
                      "c": [
                        {
                          "t": "\n Hi!\n "
                        }
                      ]
                    },
                    {
                      "t": "\n "
                    },
                    {
                      "tn": "MAIN",
                      "ci": 7,
                      "a": [],
                      "c": [
                        {
                          "t": "\n "
                        },
                        {
                          "tn": "SLOT",
                          "ci": 9,
                          "a": [
                            [
                              "name",
                              "main"
                            ]
                          ]
                        },
                        {
                          "t": "\n "
                        }
                      ]
                    },
                    {
                      "t": "\n "
                    },
                    {
                      "tn": "DIV",
                      "ci": 10,
                      "a": [
                        [
                          "hidden",
                          ""
                        ]
                      ],
                      "c": [
                        {
                          "t": "\n Some content\n "
                        }
                      ]
                    },
                    {
                      "t": "\n "
                    }
                  ]
                },
                {
                  "t": "\n "
                }
              ]
            },
            "c": [
              {
                "t": "\n "
              },
              {
                "tn": "DIV",
                "ci": 7,
                "a": [
                  [
                    "slot",
                    "main"
                  ]
                ],
                "c": [
                  {
                    "t": "\n "
                  },
                  {
                    "tn": "MY-ELEMENT",
                    "ci": 6,
                    "a": [],
                    "sr": {
                      "c": [
                        {
                          "t": "\n "
                        },
                        {
                          "tn": "DIV",
                          "ci": 7,
                          "a": [
                            [
                              "class",
                              "wrapper"
                            ]
                          ],
                          "c": [
                            {
                              "t": "\n "
                            },
                            {
                              "tn": "HEADER",
                              "ci": 8,
                              "a": [],
                              "c": [
                                {
                                  "t": "\n Hi!\n "
                                }
                              ]
                            },
                            {
                              "t": "\n "
                            },
                            {
                              "tn": "MAIN",
                              "ci": 8,
                              "a": [],
                              "c": [
                                {
                                  "t": "\n "
                                },
                                {
                                  "tn": "SLOT",
                                  "ci": 9,
                                  "a": [
                                    [
                                      "name",
                                      "main"
                                    ]
                                  ]
                                },
                                {
                                  "t": "\n "
                                }
                              ]
                            },
                            {
                              "t": "\n "
                            },
                            {
                              "tn": "DIV",
                              "ci": 10,
                              "a": [
                                [
                                  "hidden",
                                  ""
                                ]
                              ],
                              "c": [
                                {
                                  "t": "\n Some content\n "
                                }
                              ]
                            },
                            {
                              "t": "\n "
                            }
                          ]
                        },
                        {
                          "t": "\n "
                        }
                      ]
                    },
                    "c": [
                      {
                        "t": "\n "
                      },
                      {
                        "t": "\n "
                      },
                      {
                        "tn": "DIV",
                        "ci": 13,
                        "a": [
                          [
                            "slot",
                            "main"
                          ],
                          [
                            "class",
                            "nest-text-red"
                          ]
                        ],
                        "c": [
                          {
                            "t": "This is a nested custom element"
                          }
                        ]
                      },
                      {
                        "t": "\n "
                      },
                      {
                        "tn": "P",
                        "ci": 14,
                        "a": [],
                        "c": [
                          {
                            "t": "with some content"
                          }
                        ]
                      },
                      {
                        "t": "\n "
                      }
                    ]
                  },
                  {
                    "t": "\n "
                  }
                ]
              },
              {
                "t": "\n "
              },
              {
                "tn": "P",
                "ci": 14,
                "a": [],
                "c": [
                  {
                    "t": "with some content"
                  }
                ]
              },
              {
                "t": "\n "
              }
            ]
          },
          {
            "t": "\n\n\n"
          }
        ]
      },
      {
        "tn": "DIV",
        "ci": 15,
        "a": [
          [
            "data-monsido-extension-id",
            "ggdpnefhigjoocdbalmhohmohjngdnfn"
          ],
          [
            "monsido-extension-version",
            "2"
          ]
        ]
      }
    ]
  },
  "css": [
    "-webkit-writing-mode:horizontal-tb;-webkit-user-modify:read-only;-webkit-user-drag:auto;-webkit-text-stroke-width:0px;-webkit-text-stroke-color:rgb(0, 0, 0);-webkit-text-security:none;-webkit-text-orientation:vertical-right;-webkit-text-fill-color:rgb(0, 0, 0);-webkit-text-decorations-in-effect:none;-webkit-text-combine:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0.18);-webkit-rtl-ordering:logical;-webkit-print-color-adjust:economy;-webkit-mask-box-image-width:auto;-webkit-mask-box-image-source:none;-webkit-mask-box-image-slice:0 fill;-webkit-mask-box-image-repeat:stretch;-webkit-mask-box-image-outset:0;-webkit-mask-box-image:none;-webkit-locale:\\\"en\\\";-webkit-line-clamp:none;-webkit-line-break:auto;-webkit-font-smoothing:auto;-webkit-box-reflect:none;-webkit-box-pack:start;-webkit-box-orient:horizontal;-webkit-box-ordinal-group:1;-webkit-box-flex:0;-webkit-box-direction:normal;-webkit-box-decoration-break:slice;-webkit-box-align:stretch;-webkit-border-vertical-spacing:0px;-webkit-border-image:none;-webkit-border-horizontal-spacing:0px;zoom:1;z-index:auto;y:0px;x:0px;writing-mode:horizontal-tb;word-spacing:0px;word-break:normal;will-change:auto;width:1470px;widows:2;white-space-collapse:collapse;visibility:visible;view-transition-name:root;view-transition-class:none;view-timeline-name:none;view-timeline-inset:auto;view-timeline-axis:block;vertical-align:baseline;vector-effect:none;user-select:auto;unicode-bidi:normal;translate:none;transition-timing-function:ease;transition-property:all;transition-duration:0s;transition-delay:0s;transition-behavior:normal;transform-style:flat;transform-origin:735px 101.164px;transform:none;touch-action:auto;top:auto;timeline-scope:none;text-wrap-style:auto;text-wrap-mode:wrap;text-underline-position:auto;text-transform:none;text-spacing-trim:normal;text-size-adjust:auto;text-shadow:none;text-rendering:auto;text-overflow:clip;text-indent:0px;text-emphasis-style:none;text-emphasis-position:over;text-emphasis-color:rgb(0, 0, 0);text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-line:none;text-decoration-color:rgb(0, 0, 0);text-decoration:none solid rgb(0, 0, 0);text-box-trim:none;text-box-edge:auto;text-anchor:start;text-align-last:auto;text-align:start;table-layout:auto;tab-size:8;stroke-width:1px;stroke-opacity:1;stroke-miterlimit:4;stroke-linejoin:miter;stroke-linecap:butt;stroke-dashoffset:0px;stroke-dasharray:none;stroke:none;stop-opacity:1;stop-color:rgb(0, 0, 0);speak:normal;shape-rendering:auto;shape-outside:none;shape-margin:0px;shape-image-threshold:0;scrollbar-width:auto;scrollbar-gutter:auto;scrollbar-color:auto;scroll-timeline-name:none;scroll-timeline-axis:block;scroll-padding-inline-start:auto;scroll-padding-inline-end:auto;scroll-padding-block-start:auto;scroll-padding-block-end:auto;scroll-marker-group:none;scroll-margin-inline-start:0px;scroll-margin-inline-end:0px;scroll-margin-block-start:0px;scroll-margin-block-end:0px;scroll-initial-target:none;scroll-behavior:auto;scale:none;ry:auto;rx:auto;ruby-position:over;ruby-align:space-around;row-gap:normal;rotate:none;right:auto;resize:none;r:0px;position-visibility:always;position-try-order:normal;position-try-fallbacks:none;position-area:none;position-anchor:auto;position:static;pointer-events:auto;perspective-origin:735px 101.164px;perspective:none;paint-order:normal;padding-top:0px;padding-right:0px;padding-left:0px;padding-inline-start:0px;padding-inline-end:0px;padding-bottom:0px;padding-block-start:0px;padding-block-end:0px;overscroll-behavior-inline:auto;overscroll-behavior-block:auto;overlay:none;overflow-y:visible;overflow-x:visible;overflow-wrap:normal;overflow-inline:visible;overflow-clip-margin:0px;overflow-block:visible;overflow-anchor:auto;outline-width:0px;outline-style:none;outline-offset:0px;outline-color:rgb(0, 0, 0);orphans:2;order:0;opacity:1;offset-rotate:auto 0deg;offset-position:normal;offset-path:none;offset-distance:0px;offset-anchor:auto;object-view-box:none;object-position:50% 50%;object-fit:fill;mix-blend-mode:normal;min-width:0px;min-inline-size:0px;min-height:0px;min-block-size:0px;max-width:none;max-inline-size:none;max-height:none;max-block-size:none;math-style:normal;math-shift:normal;math-depth:0;mask-type:luminance;mask-size:auto;mask-repeat:repeat;mask-position:0% 0%;mask-origin:border-box;mask-mode:match-source;mask-image:none;mask-composite:add;mask-clip:border-box;marker-start:none;marker-mid:none;marker-end:none;margin-top:0px;margin-right:0px;margin-left:0px;margin-inline-start:0px;margin-inline-end:0px;margin-bottom:0px;margin-block-start:0px;margin-block-end:0px;list-style-type:disc;list-style-position:outside;list-style-image:none;line-height:normal;line-break:auto;lighting-color:rgb(255, 255, 255);letter-spacing:normal;left:auto;justify-self:auto;justify-items:normal;justify-content:normal;isolation:auto;interpolate-size:numeric-only;interactivity:auto;inset-inline-start:auto;inset-inline-end:auto;inset-block-start:auto;inset-block-end:auto;inline-size:1470px;initial-letter:normal;image-rendering:auto;image-orientation:from-image;hyphens:manual;hyphenate-limit-chars:auto;hyphenate-character:auto;height:202.328px;grid-template-rows:none;grid-template-columns:none;grid-template-areas:none;grid-row-start:auto;grid-row-end:auto;grid-column-start:auto;grid-column-end:auto;grid-auto-rows:auto;grid-auto-flow:row;grid-auto-columns:auto;font-weight:400;font-variant-position:normal;font-variant-numeric:normal;font-variant-ligatures:normal;font-variant-emoji:normal;font-variant-east-asian:normal;font-variant-caps:normal;font-variant-alternates:normal;font-variant:normal;font-synthesis-weight:auto;font-synthesis-style:auto;font-synthesis-small-caps:auto;font-style:normal;font-stretch:100%;font-size-adjust:none;font-size:16px;font-palette:normal;font-optical-sizing:auto;font-kerning:auto;font-family:Times;flood-opacity:1;flood-color:rgb(0, 0, 0);float:none;flex-wrap:nowrap;flex-shrink:1;flex-grow:0;flex-direction:row;flex-basis:auto;filter:none;fill-rule:nonzero;fill-opacity:1;fill:rgb(0, 0, 0);field-sizing:fixed;empty-cells:show;dominant-baseline:auto;display:block;direction:ltr;d:none;cy:0px;cx:0px;cursor:auto;content:normal;container-type:normal;container-name:none;contain-intrinsic-width:none;contain-intrinsic-size:none;contain-intrinsic-inline-size:none;contain-intrinsic-height:none;contain-intrinsic-block-size:none;column-width:auto;column-span:none;column-rule-width:0px;column-rule-style:none;column-rule-color:rgb(0, 0, 0);column-gap:normal;column-count:auto;color-rendering:auto;color-interpolation-filters:linearrgb;color-interpolation:srgb;color:rgb(0, 0, 0);clip-rule:nonzero;clip-path:none;clip:auto;clear:none;caret-color:rgb(0, 0, 0);caption-side:top;buffered-rendering:auto;break-inside:auto;break-before:auto;break-after:auto;box-sizing:content-box;box-shadow:none;box-decoration-break:slice;bottom:auto;border-top-width:0px;border-top-style:none;border-top-right-radius:0px;border-top-left-radius:0px;border-top-color:rgb(0, 0, 0);border-start-start-radius:0px;border-start-end-radius:0px;border-right-width:0px;border-right-style:none;border-right-color:rgb(0, 0, 0);border-left-width:0px;border-left-style:none;border-left-color:rgb(0, 0, 0);border-inline-start-width:0px;border-inline-start-style:none;border-inline-start-color:rgb(0, 0, 0);border-inline-end-width:0px;border-inline-end-style:none;border-inline-end-color:rgb(0, 0, 0);border-image-width:1;border-image-source:none;border-image-slice:100%;border-image-repeat:stretch;border-image-outset:0;border-end-start-radius:0px;border-end-end-radius:0px;border-collapse:separate;border-bottom-width:0px;border-bottom-style:none;border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-bottom-color:rgb(0, 0, 0);border-block-start-width:0px;border-block-start-style:none;border-block-start-color:rgb(0, 0, 0);border-block-end-width:0px;border-block-end-style:none;border-block-end-color:rgb(0, 0, 0);block-size:202.328px;baseline-source:auto;baseline-shift:0px;background-size:auto;background-repeat:repeat;background-position:0% 0%;background-origin:padding-box;background-image:none;background-color:rgba(0, 0, 0, 0);background-clip:border-box;background-blend-mode:normal;background-attachment:scroll;backface-visibility:visible;backdrop-filter:none;appearance:none;app-region:none;animation-timing-function:ease;animation-timeline:auto;animation-range-start:normal;animation-range-end:normal;animation-play-state:running;animation-name:none;animation-iteration-count:1;animation-fill-mode:none;animation-duration:0s;animation-direction:normal;animation-delay:0s;animation-composition:replace;anchor-scope:none;anchor-name:none;alignment-baseline:auto;align-self:auto;align-items:normal;align-content:normal;accent-color:auto;",
    "width:auto;view-transition-name:none;transform-origin:50% 50%;perspective-origin:50% 50%;inline-size:auto;height:auto;display:none;block-size:auto;",
    "width:1454px;view-transition-name:none;transform-origin:727px 87.207px;perspective-origin:727px 87.2031px;margin-top:8px;margin-right:8px;margin-left:8px;margin-inline-start:8px;margin-inline-end:8px;margin-bottom:8px;margin-block-start:8px;margin-block-end:8px;inline-size:1454px;height:174.414px;block-size:174.414px;",
    "width:1454px;view-transition-name:none;unicode-bidi:isolate;transform-origin:727px 13.75px;perspective-origin:727px 13.75px;margin-top:19.92px;margin-bottom:19.92px;margin-block-start:19.92px;margin-block-end:19.92px;inline-size:1454px;height:27.5px;font-weight:700;font-size:24px;block-size:27.5px;",
    "width:86.3984px;view-transition-name:none;transform-origin:43.1992px 10.75px;text-align:center;perspective-origin:43.1953px 10.75px;padding-top:1px;padding-right:6px;padding-left:6px;padding-inline-start:6px;padding-inline-end:6px;padding-bottom:1px;padding-block-start:1px;padding-block-end:1px;inline-size:86.3984px;height:21.5px;font-size:13.3333px;font-family:Arial;display:inline-block;cursor:default;box-sizing:border-box;border-top-width:2px;border-top-style:outset;border-right-width:2px;border-right-style:outset;border-left-width:2px;border-left-style:outset;border-inline-start-width:2px;border-inline-start-style:outset;border-inline-end-width:2px;border-inline-end-style:outset;border-bottom-width:2px;border-bottom-style:outset;border-block-start-width:2px;border-block-start-style:outset;border-block-end-width:2px;border-block-end-style:outset;block-size:21.5px;background-color:rgb(239, 239, 239);appearance:auto;",
    "width:1454px;white-space-collapse:preserve;view-transition-name:none;unicode-bidi:isolate;transform-origin:727px 0px;text-wrap-mode:nowrap;perspective-origin:727px 0px;margin-top:13px;margin-bottom:13px;margin-block-start:13px;margin-block-end:13px;inline-size:1454px;height:0px;font-size:13px;font-family:monospace;block-size:0px;",
    "width:auto;view-transition-name:none;transform-origin:0px 0px;perspective-origin:0px 0px;inline-size:auto;height:auto;display:inline;block-size:auto;",
    "width:1454px;view-transition-name:none;unicode-bidi:isolate;transform-origin:727px 18.5px;perspective-origin:727px 18.5px;inline-size:1454px;height:37px;block-size:37px;",
    "width:1454px;view-transition-name:none;unicode-bidi:isolate;transform-origin:727px 9.25px;perspective-origin:727px 9.25px;inline-size:1454px;height:18.5px;block-size:18.5px;",
    "width:auto;view-transition-name:none;transform-origin:50% 50%;perspective-origin:50% 50%;inline-size:auto;height:auto;display:contents;block-size:auto;",
    "width:auto;view-transition-name:none;unicode-bidi:isolate;transform-origin:50% 50%;perspective-origin:50% 50%;inline-size:auto;height:auto;display:none;block-size:auto;",
    "-webkit-text-stroke-color:rgb(255, 0, 0);-webkit-text-fill-color:rgb(255, 0, 0);-webkit-locale:auto;width:auto;view-transition-name:none;unicode-bidi:isolate;transform-origin:50% 50%;text-emphasis-color:rgb(255, 0, 0);text-decoration-color:rgb(255, 0, 0);text-decoration:none solid rgb(255, 0, 0);perspective-origin:50% 50%;outline-color:rgb(255, 0, 0);margin-top:16px;margin-bottom:16px;margin-block-start:16px;margin-block-end:16px;inline-size:auto;height:auto;column-rule-color:rgb(255, 0, 0);color:rgb(255, 0, 0);caret-color:rgb(255, 0, 0);border-top-color:rgb(255, 0, 0);border-right-color:rgb(255, 0, 0);border-left-color:rgb(255, 0, 0);border-inline-start-color:rgb(255, 0, 0);border-inline-end-color:rgb(255, 0, 0);border-bottom-color:rgb(255, 0, 0);border-block-start-color:rgb(255, 0, 0);border-block-end-color:rgb(255, 0, 0);block-size:auto;",
    "width:1454px;view-transition-name:none;unicode-bidi:isolate;transform-origin:727px 27.75px;perspective-origin:727px 27.75px;inline-size:1454px;height:55.5px;block-size:55.5px;",
    "-webkit-text-stroke-color:rgb(255, 0, 0);-webkit-text-fill-color:rgb(255, 0, 0);width:1454px;view-transition-name:none;unicode-bidi:isolate;transform-origin:727px 9.25px;text-emphasis-color:rgb(255, 0, 0);text-decoration-color:rgb(255, 0, 0);text-decoration:none solid rgb(255, 0, 0);perspective-origin:727px 9.25px;outline-color:rgb(255, 0, 0);inline-size:1454px;height:18.5px;column-rule-color:rgb(255, 0, 0);color:rgb(255, 0, 0);caret-color:rgb(255, 0, 0);border-top-color:rgb(255, 0, 0);border-right-color:rgb(255, 0, 0);border-left-color:rgb(255, 0, 0);border-inline-start-color:rgb(255, 0, 0);border-inline-end-color:rgb(255, 0, 0);border-bottom-color:rgb(255, 0, 0);border-block-start-color:rgb(255, 0, 0);border-block-end-color:rgb(255, 0, 0);block-size:18.5px;",
    "-webkit-locale:auto;width:auto;view-transition-name:none;unicode-bidi:isolate;transform-origin:50% 50%;perspective-origin:50% 50%;margin-top:16px;margin-bottom:16px;margin-block-start:16px;margin-block-end:16px;inline-size:auto;height:auto;block-size:auto;",
    "view-transition-name:none;unicode-bidi:isolate;transform-origin:735px 0px;perspective-origin:735px 0px;height:0px;block-size:0px;"
  ],
  "html": "<html lang=\"en\"><head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Data Collector</title>\n <script type=\"module\">\n class MyElement extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: \"open\" });\n this.render();\n }\n render() {\n const template = document.createElement('template');\n template.innerHTML = `\n <div class=\"wrapper\">\n <header>\n Hi!\n </header>\n <main>\n <slot name=\"main\"></slot>\n </main>\n <div hidden>\n Some content\n </div>\n </div>\n `;\n if (this.shadowRoot) {\n this.shadowRoot.innerHTML = '';\n this.shadowRoot.appendChild(template.content);\n }\n }\n }\n customElements.define('my-element', MyElement);\n </script>\n <script type=\"module\">\n import { DataCollector } from './index.js';\n\n async function collectData () {\n const html = document.documentElement;\n const dataCollector = new DataCollector();\n const output = await dataCollector.collectData(html);\n document.querySelector('#data_collector_output').innerText = JSON.stringify(output, null, 2);\n }\n\n const collectBtn = document.querySelector('#collectBtn');\n collectBtn.addEventListener('click', collectData);\n </script>\n<style type=\"text/css\"></style></head>\n<body>\n <h2>Data collector</h2>\n <!-- <label for=\"htmlinput\">Add html snippet.</label><br>\n <input name=\"htmlinput\" id=\"htmlinput\"></input><br> -->\n <button type=\"button\" id=\"collectBtn\">Collect data</button>\n <pre id=\"data_collector_output\"></pre>\n <my-element>\n <div slot=\"main\">This is a custom element</div>\n <p class=\"nest-text-red\">with some content</p>\n </my-element>\n <my-element>\n <div slot=\"main\">\n <my-element>\n <style>.nest-text-red { color: red; }</style>\n <div slot=\"main\" class=\"nest-text-red\">This is a nested custom element</div>\n <p>with some content</p>\n </my-element>\n </div>\n <p>with some content</p>\n </my-element>\n\n\n</body><div data-monsido-extension-id=\"ggdpnefhigjoocdbalmhohmohjngdnfn\" monsido-extension-version=\"2\"></div></html>",
  "version": "4.1.2",
  "viewport": {
    "w": 1470,
    "h": 831
  }
}

• Copy the above json
• Go to http://localhost:8000/page-builder.html
• Paste the json above into the input box
• Click Build HTML
• It should display the following
  

[tooms73]

Looks like we are ready for shadow dom 👍