flatten:true vs flatten:false

<!DOCTYPE html>

<html>
  <head>
    <script src="main.js" type="module"></script>
  </head>

  <body>
    <p>open your console!</p>
    <test-a><span id="span"/></test-a>
  </body>
</html>

customElements.define(
  'test-a',
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({
        mode: 'open',
      }).innerHTML = `<test-b><slot id="a"></slot></test-b>`;
    }
  }
);

customElements.define(
  'test-b',
  class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' }).innerHTML = `<slot id="b"></slot>`;
    }
  }
);

await customElements.whenDefined('test-a');
await customElements.whenDefined('test-b');

const t = document
  .querySelector('test-a')
  .shadowRoot.querySelector('test-b')
  .shadowRoot.querySelector('slot')
  .assignedNodes({ flatten: true });
  // => [span#span]

const f = document
  .querySelector('test-a')
  .shadowRoot.querySelector('test-b')
  .shadowRoot.querySelector('slot')
  .assignedNodes({ flatten: false });
  // => [slot#a]

console.log('flatten: true', t);
console.log('flatten: false', f);