`{{#in-element}}`

Renders a block into a DOM element outside the current component tree.

Since Ember 4/5 (Octane) Spec ↗

Syntax

{{#in-element destinationElement}} ... {{/in-element}}

Returns

block — Renders the block into the target element.

Examples

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class ModalComponent extends Component {
  get target() {
    return document.getElementById('modal-root');
  }
}

{{#if @isOpen}}
  {{#in-element this.target}}
    <div class="modal">{{yield}}</div>
  {{/in-element}}
{{/if}}

Notes

The destination must be a real DOM element (not a selector). This is the primitive behind modals, tooltips, and popovers. Logic and data binding stay with the owning component even though the DOM is relocated.