title: Add html to a lightning component from a visual force page
body: <p>I am wondering if it is possible to add an HTML template to a lightning component that I am calling in a visual force page. I have this template in my Vf page:</p>
  
  <pre><code>&lt;script id="user_filter_template" type="text/x-kendo-template"&gt;
              &lt;input type="text" id="comboBox" name="comboBox"/&gt;
              &lt;div class="container" id="checkboxWrapper" style="margin-top: 10px;"&gt;
                  &lt;p style="display: inline; margin-top: 10px;"&gt;Enable: &lt;/p&gt;
                  &lt;input type="checkbox" id="ownerFilterCheckbox" style="margin-top: 2px;"/&gt;    
              &lt;/div&gt;
          &lt;/script&gt;
  </code></pre>
  
  <p>Then calling the component:</p>
  
  <pre><code>$Lightning.use("c:filterBar", function(){
                      $Lightning.createComponent("c:userTab", {label: ""}, "filterTabStrip", function(comp, status, errorMessage){
                          userTemplate = $('#user_filter_template').html();
                          $A.createComponent("aura:html", {tag: "div", body: userTemplate}, function(cmp, success, errorMessage){
                              console.log(cmp);
                              var ownerTab = comp.find('ownerTabContent');
                              ownerTab.set('v.body', userTemplate);
                          });
                      });    
                  });
  </code></pre>
  
  <p>The first $Lightning.createComponent creates the tab bar that is my component, but I tried setting the body of an aura:html element to my template, then setting the body of my tab content to that new component, but I get "This page has an error. You might just need to refresh it. rerender threw an error in 'markup://aura:html' [w.o.u is not a function] Failing descriptor: {markup://aura:html" error. </p>
  
  <p>My component currently looks like this:</p>
  
  <pre><code>&lt;aura:component &gt;
  &lt;aura:attribute name="opts" type="List" default="['Tyler Dahle','Molly Demouser','Penny Demouser', 'Ted Demouser']"/&gt;
  
  &lt;div class="slds-tabs--scoped"&gt;
      &lt;ul aura:id="tabBar" class="slds-tabs--scoped__nav" role="tablist"&gt;
          &lt;li aura:id="ownerTab_item" class="slds-tabs--scoped__item" title="ownerTab" role="presentation" onclick="{!c.ownerTabSelect}"&gt;&lt;a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="ownerTabContent" id="ownerTab"&gt;&lt;lightning:icon iconName="utility:groups"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li aura:id="locationTab_item" class="slds-tabs--scoped__item" title="locationTab" role="presentation" onclick="{!c.locationTabSelect}"&gt;&lt;a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="locationTabContent" id="locationTab"&gt;&lt;lightning:icon iconName="utility:location"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li aura:id="descriptionTab_item" class="slds-tabs--scoped__item" title="descriptionTab" role="presentation" onclick="{!c.descriptionTabSelect}"&gt;&lt;a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="descriptionTabContent" id="descriptionTab"&gt;&lt;lightning:icon iconName="utility:description"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li aura:id="typeTab_item" class="slds-tabs--scoped__item" title="typeTab" role="presentation" onclick="{!c.typeTabSelect}"&gt;&lt;a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="typeTabContent" id="typeTab"&gt;&lt;lightning:icon iconName="utility:picklist"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li aura:id="customTab_item" class="slds-tabs--scoped__item" title="customTab" role="presentation" onclick="{!c.customTabSelect}"&gt;&lt;a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="customTabContent" id="customTab"&gt;&lt;lightning:icon iconName="utility:apps"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li aura:id="settingsTab_item" class="slds-tabs--scoped__item" title="settingsTab" role="presentation" onclick="{!c.settingsTabSelect}"&gt;&lt;a class="slds-tabs--scoped__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="true" aria-controls="settingsTabContent" id="settingsTab"&gt;&lt;lightning:icon iconName="utility:settings"/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div aura:id="ownerTabContent" class="slds-tabs--scoped__content slds-hide" role="tabpanel" aria-labelledby="ownerTab"&gt;
          {!v.body}
      &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>I am using Kendo UI, so not sure at all how to use that inside a lightning component... which is why I would love a way to just set these templates into the lighting component from my visual force page, because then the kendo elements will be all set up and ready to go and just plopped into the component.</p>
  
  <p>Thanks in advance for any help on this!</p>