Document Fragments in Component Lifecycle

Performance
1

I love that components give you methods that run before and after it’s been inserted into the DOM. However, is there not a way to access the document fragment that has been built prior to it’s insertion?

Wouldn’t that be a far better way of, for example, attaching third party jQuery plugins to a DOM element. Rather than querying for the element post-insertion?

2

Essentially:

export default Ember.Component.extend({
  willRender() {
    this.$().find('element').tooltip();
  }
});

$() this being a reference to the document fragment in memory, which will later be the same DOM element that is available to didInsertElement.

2 Likes
3

I’m really curious about this as well. In fact, coming to Ember from Angular (albeit a long time ago), that was my original intuition about how the Component Lifecycle might have worked before I truly began digging into each piece.

To add another use case alongside @davearel’s, it seems like programmatically setting style properties on the element’s HTMLElement interface (if one needed to do so, that is) could be optimized if it were done pre-insertion:

export default Ember.Component.extend({

  willRender() {
    this._super(...arguments);
    if (this.expandFromTopRightCorner) {
      this.element.style.transformOrigin = 'right top';
   }
  }
});
1 Like