Ember ShadowRoot component that works in a single render pass

shadow-root.gjs

import Component from '@glimmer/component';

// This component renders its contents in a shadow root:
//
// <ShadowRoot>stuff</ShadowRoot>
//
// Critically, it renders in a single render pass. The more natural
// modifier-based solutions do not.
//
// The "trick" we're relying on here is the little-known feature that helpers
// can return DOM elements. Thus our helper can create an element and prepare
// the shadow root synchronously before in-element tries to render into it.
export default class ShadowRootComponent extends Component {
  <template>
    {{ (this.createShadowRoot) }}
    {{#in-element this.shadowRoot}}
      {{yield}}
    {{/in-element}}
  </template>
  createShadowRoot = () => {
    if (!this.stableElement) {
      this.stableElement = document.createElement('div');
      this.shadowRoot = this.stableElement.attachShadow({ mode: 'open' });
    }
    return this.stableElement;
  };
}