EmberJS: Access to component html from within the component js

Question

Is there a way to access from within the component JS file the inner contents of the component initialization. I essentially would like to have access to yield.

For example let's say I have an hbs with this template:

{{#my-component}}
  <span>bla bla {{foo}}</span>
{{/my-component}}

Then I want in my component to access that span above like in the example below, where in the theInnerHtml I want to get what was inside the initialized component.

import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement() {
    let theInnerHtml = this.get('innerHTML'); // "<span>bla bla {{foo}}</span>"
  }
});

Answer 1

You can jQuery, which is already built into Ember, to get a jQuery object for the element you're looking for,

import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement() {
    let theInnerHtml = this.$('span').html();
  }
});

or you can just use Ember Component's element property: http://emberjs.com/api/classes/Ember.Component.html#property_element

import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement() {
    let theInnerHtml = this.element;
  }
});