0

I have a use case where I can move a child component to different DOM location within same page/route dynamically.

home.hbs

<div class="container">
  <div class="content">
    <!-- Place where I want to place Child -->
   </div>
</div>
<Parent></Parent>

Parent.hbs

<h1>This is parent component</h1>
<Child></Child>

child.hbs

Hello World

child.js

const mainContainer = document.querySelector('.container .content');
const myElm = this.element.querySelector('[data-child-content]');
mainContainer.appendChild(myElm);

I want to use ember-maybe-in-element addon instead of using appendChild.

Sankeerna Reddy
  • 161
  • 2
  • 8
  • It is unclear how the different pieces of your post relate. The html code contains a web-component `` but no ember/hbs code. The js code seems has no context and does direct DOM manipulation, which you probably shouldnt use with ember, and its unclear what you want to achieve with the addon you linked. Can you please elaborate what you are trying to do exactly, explain your use-case a bit and explain how your code and thoughts are related. When you post code you should explain if it is working code that you want to extend, or a not working attempt, and explain why you wrote it – Lux Oct 17 '20 at 17:24
  • I have elaborated question bit more. Does that help? – Sankeerna Reddy Oct 19 '20 at 02:05
  • 1
    that helps, but what is your problem? what is not working with `{{#in-element}}`? And you probably dont need this addon, just `in-element` which is part of ember 3.20+ or the polyfill for older versions. – Lux Oct 19 '20 at 07:10
  • you are right i don't need the addon. {{#in-element}} helps to achieve rendering the block content outside the regular flow. Thank you @Lux – Sankeerna Reddy Oct 21 '20 at 03:51

1 Answers1

1

The in-element helper renders the block content outside of the regular flow, into a DOM element given by its destinationElement positional argument.

child.js

get destinationElement() {
  return document.querySelector('.container .content');
}

child.hbs

{{#in-element this.destinationElement}}
   <div>Hello World</div>
{{/in-element}}
Sankeerna Reddy
  • 161
  • 2
  • 8