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: allow slots to aggregate projected elements #46

Closed KonnorRogers closed 1 year ago

KonnorRogers commented 1 year ago

Well...it works...but it also patches slot, which isn't great...

Accidentally discovered how to print out elements assigned to slots by patching "childNodes"

 RUN  v0.17.1 /home/konnorrogers/msft/shadow-dom-testing-library

stdout | __tests__/slot.test.tsx > Should aggregate content from slots
<body>
  <div>
    <duplicate-buttons>
      <ShadowRoot>
        <slot
          name="start"
        >
          <!-- Aggregated from light DOM -->
          <button
            slot="start"
          >
            <img
              src=""
            />

            <span>
              Start button
            </span>
          </button>
          <!-- -->
        </slot>
        <button>
          Button One
        </button>
        <br />
        <slot>
           <!-- Aggregated from light DOM -->
          <a
            href="#"
          >
            Middle Link
          </a>
           <!-- -->
        </slot>
        <br />
        <button>
          Button Two
        </button>
        <slot
          name="end"
        />
      </ShadowRoot>

      <button
        slot="start"
      >
        <img
          src=""
        />

        <span>
          Start button
        </span>
      </button>
      <a
        href="#"
      >
        Middle Link
      </a>
    </duplicate-buttons>
  </div>
</body>