[Bug] declarative ShadowDOM is unable to have content rendered in to it

[NullVoxPopuli]

🐞 Describe the Bug

Reading and trying to apply https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html

Element is empty when I expect yielded content to be within it.

Related:

• [Bug] #in-element cannot directly render in to shadow-dom #20641

🔬 Minimal Reproduction

An attempt at creating a shadow-dom-using component:

import { setComponentTemplate } from '@ember/component';
import templateOnly from '@ember/component/template-only';
import { precompileTemplate } from '@ember/template-compilation';

import type { TOC } from '@ember/component/template-only';
import type { ComponentLike } from '@glint/template';

// index.html has the production-fingerprinted references to these links
// Ideally, we'd have some pre-processor scan everything for references to
// assets in public, but idk how to set that up
const getStyles = () => [...document.head.querySelectorAll('link')].map((link) => link.href);


const Shadow = setComponentTemplate(precompileTemplate(`
  <template shadowrootmode="open">
    {{yield}}
  </template>
`, { strictMode: true }), templateOnly('shadow', 'Shadow')) as ComponentLike<{
  Element: null;
  Args: {};
  Blocks: { default: [] }
}>;

export const Shadowed: TOC<{
  Element: HTMLDivElement;
  Args: {
    omitStyles?: boolean;
  };
  Blocks: { default: [] };
}> = <template>
  <div data-shadow ...attributes>
    <Shadow>
      {{#unless @omitStyles}}
        {{#each (getStyles) as |styleHref|}}
          <link rel="stylesheet" href={{styleHref}} />
        {{/each}}
      {{/unless}}

      {{yield}}
    </Shadow>
  </div>
</template>;

export default Shadowed;

Note that I'm manually using low-level APIs for the component, due to:
https://github.com/embroider-build/content-tag/pull/66/files

This is the test I'm using to debug:

import { find, render } from '@ember/test-helpers';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';

import { Shadowed } from 'limber/components/shadowed';

module('Rendering | <Shadowed>', function (hooks) {
  setupRenderingTest(hooks);

  test('it works', async function (assert) {
    await render(
      <template>
        out of shadow

        <Shadowed>
          in shadow
        </Shadowed>
      </template>
    );

    await this.pauseTest();
    assert.dom().hasText('out of shadow');
    assert.dom().doesNotContainText('in shadow');
    // assort.dom forgot that ShadowDom is a thing
    // assert.dom(find('[data-shadow]')?.shadowRoot).hasText('in shadow');
    assert.ok(find('template')?.shadowRoot?.textContent?.includes('in shadow'));
  });
});

😕 Actual Behavior

🤔 Expected Behavior

in shadow is rendered in to the <template>

🌍 Environment

• Ember: - ember-source 5.5 and 5.6