Passing template html as attribute to Ember component

Right now I have an Ember component that generates markup for a modal popup. I'd like to pass some HTML to the component (in the form of component attributes) that will be assigned as the modal's content body. Something like this would be ideal:

Route Template: app/templates/section1.hbs

<div class="content">

    <h1>Section 1</h1>

    

</div>

Modal Template: app/components/my-modal/template.hbs

<div id="my-modal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                

            </div>

        </div>

    </div>

</div>

The content I want to display in the modal's body is static and specific to the current template.

I don't want to have this myContent html set in a controller, if possible, or in the route's model hook. Ideally, I could just set this html in the route's template. Currently this is my workaround that requires appending a javascript template to the desired element after didInsertElement.

Is there a better way to accomplish this, like setting a local handlbars template variable to some html (inside app/templates/section1.hbs)?

Current Solution/Workaround:

Route Template: app/templates/section1.hbs

<script type="text/template" id="my-content">

    <h1>Hello Ember!</h1>
    <p> Welcome to components </p>

</script>

<div class="content">

    <h1>Section 1</h1>

    

</div>

Component JS: app/components/my-modal/component.js

import Ember from 'ember';

export default Ember.Component.extend({

    tagName:    'div',
    classNames: 'modals',

    didInsertElement: function() {

        this.$('#my-modal').append($('#my-content').html());

    };
});

Modal Template: app/components/my-modal/template.hbs

<div id="my-modal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                //jQuery will append template content here

            </div>

        </div>

    </div>

</div>