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

feat: replace DOMParser with a proper printer #43

Closed KonnorRogers closed 2 years ago

KonnorRogers commented 2 years ago

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.