title: Stencil.js - How to supply JSX templates with template literals externally?
body: <p>I'm developing a widget like component that shows current share price data. However, I want to supply the JSX template externally as the layout requirement differs from client to client.</p>
  
  <p>I tried two approaches with no luck. In the first approach, I supplied a template as a slot. In the second, I made a  tag and tried to get it rendered from the component's render method.</p>
  
  <p>Approach - 1: Slots</p>
  
  <pre><code>// Inside "index.html"
  &lt;my-component&gt;
  &lt;span&gt;{ this.price }&lt;/span&gt;
  &lt;/my-component&gt;
  
  // Inside "my-component.tsx"
  ...
  
  componentWillLoad() {
  // code to fetch dynamic data goes here
  }
  
  render() {
  return (
  &lt;slot /&gt;
  );
  }
  </code></pre>
  
  <p>Approach - 2: Template</p>
  
  <pre><code>
  // Inside "index.html"
  
  &lt;template id="ticker-widget-layout"&gt;
  &lt;span&gt;{ this.price }&lt;/span&gt;
  &lt;/template&gt;
  
  </code></pre>
  
  <p>In fact, I poorly failed to even get implemented the second approach as I received multiple errors.</p>
  
  <p>I expect the user (here user means someone using my component to build their widget) should be able to set the layout externally. Plus, the placeholders/template literals should be rendered with the actual value. Currently, my component renders the template literal itself.</p>