Skip to content

Conversation

@KonnorRogers
Copy link
Owner

@KonnorRogers KonnorRogers commented Nov 27, 2022

Use a real shadowDOM printer!

fixes #42

There needs to be some more robust testing, but in manually checking triple-nested-shadow-roots it works as expected.

stdout | __tests__/pretty-shadow-dom.test.tsx > It should render 3 shadow root instances
<body>
  <div>
    <triple-shadow-roots>
      <ShadowRoot>


        <nested-shadow-roots>
          <ShadowRoot>


            <duplicate-buttons>
              <ShadowRoot>


                <slot
                  name="start"
                />


                <button>
                  Button One
                </button>


                <br />


                <slot />


                <br />


                <button>
                  Button Two
                </button>


                <slot
                  name="end"
                />


              </ShadowRoot>
            </duplicate-buttons>


          </ShadowRoot>


        </nested-shadow-roots>


      </ShadowRoot>
    </triple-shadow-roots>
  </div>
</body>

There's large amount of white space due to how node.childNodes works. This is expected and how prettyDOM works today due to "significant whitespace"

I'll look to see if theres a way to strip this out in the future.

@KonnorRogers KonnorRogers changed the title fix: use a real printer fix: replace DOMParser with a proper printer Nov 28, 2022
@KonnorRogers KonnorRogers changed the title fix: replace DOMParser with a proper printer feat: replace DOMParser with a proper printer Nov 28, 2022
@KonnorRogers KonnorRogers merged commit ebde061 into main Nov 28, 2022
@KonnorRogers KonnorRogers deleted the konnorrogers/use-a-real-printer branch November 28, 2022 16:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

screen.debug() deletes elements from output

1 participant