# Document Fragments in Component Lifecycle

**URL:** <https://discuss.emberjs.com/t/document-fragments-in-component-lifecycle/9548>\
**Category:** Performance\
**Created:** [January 26, 2016, 6:09pm UTC](https://discuss.emberjs.com/t/document-fragments-in-component-lifecycle/9548 "2016-01-26T18:09:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![davearel](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/davearel/32/11951_2.png) [@davearel](https://discuss.emberjs.com/u/davearel)\
**Post date:** [January 26, 2016, 6:09pm UTC](https://discuss.emberjs.com/t/document-fragments-in-component-lifecycle/9548/1 "2016-01-26T18:09:36Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![davearel](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/davearel/32/11951_2.png) [@davearel](https://discuss.emberjs.com/u/davearel)\
**Post date:** [January 26, 2016, 6:14pm UTC](https://discuss.emberjs.com/t/document-fragments-in-component-lifecycle/9548/2 "2016-01-26T18:14:58Z")

</div>

Essentially:

```auto
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`.

---

<div class="post-metadata">

**Author:** ![BrianSipple](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/briansipple/32/12954_2.png) [@BrianSipple](https://discuss.emberjs.com/u/BrianSipple)\
**Post date:** [March 3, 2016, 12:18am UTC](https://discuss.emberjs.com/t/document-fragments-in-component-lifecycle/9548/3 "2016-03-03T00:18:27Z")

</div>

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:

```auto
export default Ember.Component.extend({

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

```