[Bug] in-element cannot render into a document-fragment

This is basically the same as: https://github.com/emberjs/ember.js/issues/20641

but with this code:
(notice the `.content`)

```gts
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { setComponentTemplate } from '@ember/component';
import templateOnly from '@ember/component/template-only';
import { precompileTemplate } from '@ember/template-compilation';

import { modifier } from 'ember-modifier';

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(`

{{yield}}

`, { strictMode: true }), templateOnly('shadow', 'Shadow')) as ComponentLike<{
Element: HTMLTemplateElement;
Args: {};
Blocks: { default: [] }
}>;

export class Shadowed extends Component<{
Element: HTMLDivElement;
Args: {
omitStyles?: boolean;
};
Blocks: { default: [] };
}> {
@tracked shadow: ShadowRoot | undefined | null;

getShadowRef = modifier((element: HTMLTemplateElement) => {
this.shadow = element.content;
});

export default Shadowed;
```