ember fragment rendering

readme.md

{{#performant-render}}
my - alot of dom conent, component
{{/performant-render}}

component.js

import Component from '@ember/component';
import { computed } from '@ember/object';
export default Component.extend({
  internalTag: 'div',
  internalClass: '',
  init() {
    this._super(...arguments);
    this.fragment = document.createElement(this.internalTag);
    if (this.internalClass) {
      this.fragment.className = this.internalClass;
    }
  },
  appendElement: computed(function() {
    const selector = this.rootSelector;
    if (selector) {
      if (selector.startsWith('#')) {
        return document.getElementById(selector.slice(1));
      } else {
        return document.querySelector(selector);
      }
    } else {
      return this.element;
    }
  }),
  addFragmentToDom: computed(function() {
    const el = this.appendElement;
    if (!el.contains(this.fragment)) {
      el.appendChild(this.fragment);
    }
    return '';
  })
})

template.hbs

{{#-in-element this.fragment}}
  {{yield}}
{{/-in-element}}
{{this.addFragmentToDom}}