search

KonnorRogers / shadow-dom-testing-library

An extension of DOM-testing-library to provide hooks into the shadow dom
MIT License
98 stars 2 forks source link

screen.debug() doesn't print nested shadow roots. #19

Closed CreativeTechGuy closed 2 years ago

CreativeTechGuy commented 2 years ago

The new change for print shadow roots is awesome! Thanks for adding that. I noticed that it doesn't expand nested shadow roots though (so one web-component inside the shadow root of another web-component).

In looking at the code, it seems to be because of this line: https://github.com/KonnorRogers/shadow-dom-testing-library/blob/main/src/prettyShadowDOM.ts#L34

If node.shadowRoot !== null then it won't have any children. It seems like the line would need to be node.shadowRoot.children in that case. In my limited testing, that seems to fix the issue I described.

CreativeTechGuy commented 2 years ago

In further testing. It seems like both are needed since some elements do have both shadowRoot and children.

So my theorized fixed version:

  while (nodesToProcess.length > 0) {
    const node = nodesToProcess.shift()!;
    if (node.shadowRoot !== null) {
      const tempNode = document.createElement("div");
      tempNode.innerHTML = node.outerHTML;

      const shadowRootPseudoNode = document.createElement("shadow-root");
      shadowRootPseudoNode.innerHTML = node.shadowRoot.innerHTML;
      tempNode.firstElementChild!.insertBefore(
        shadowRootPseudoNode,
        tempNode.firstElementChild!.firstChild
      );
      htmlString = htmlString.replace(node.outerHTML, tempNode.innerHTML);
      nodesToProcess.push(...Array.from(node.shadowRoot.children));
    }
    nodesToProcess.push(...Array.from(node.children));
  }
KonnorRogers commented 2 years ago

@CreativeTechGuy funnily enough, it turns out that shadow-dom-testing-library wasnt properly digging into nested shadow roots. I'll take a peek and see if this works.

CreativeTechGuy commented 2 years ago

Do you mean that it wasn't digging into nested shadow roots at all? Because I found this issue while pulling my hair out trying to figure out why the queryByShadowRole selector wasn't finding something in a nested shadow root. I guess it's now a known issue! Glad you are aware of it. :)

KonnorRogers commented 2 years ago

@CreativeTechGuy Yup. PR will fix it. TLDR: querySelectorAll("*") and querySelectorAll(":scope *") behave slightly differently...

KonnorRogers commented 2 years ago 
<body>
  <div>
    <triple-shadow-roots>
      <shadow-root>
        <nested-shadow-roots>
          <shadow-root>
            <duplicate-buttons>
              <shadow-root>
                <slot
                  name="start"
                />
                <button>
                  Button One
                </button>
                <br />
                <slot />
                <br />
                <button>
                  Button Two
                </button>
                <slot
                  name="end"
                />
              </shadow-root>
            </duplicate-buttons>
          </shadow-root>
        </nested-shadow-roots>
      </shadow-root>
    </triple-shadow-roots>
  </div>
</body>

Heres an example of 3 shadow roots deep, oh and tests added!