title: vuejs: Component for <tr>, how to implement?
body: <p>After reading docs &amp; forums for hours... still have no answer.</p>
  
  <p>Have the following JS/HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component("my-component", {
      props: ["id"],
      
      render: function(h) {
          return h("tr", this.$slots.default);
      }
  });
      
      
  var vapp = new Vue();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue@2.4.2/dist/vue.js"&gt;&lt;/script&gt;
  
  &lt;table&gt;
      &lt;tr is="my-component" :name="yo"&gt;
          &lt;td&gt;
              &lt;span v-text="name"&gt;&lt;/span&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Use tr + "is" attribute to specify component within the table otherwise browser will hoist it out as invalid content. <strong>Done</strong></p>
  
  <p>Use render + h("tr"...) because vuejs doesn't render tr element, but instead table > td and again browser hoist it out.<strong>Done</strong></p>
  
  <p>Now I have table > tr > td rendered well but how can I add children bound to the props/data, so I will see "yo" on the screen.</p>
  
  <p>Thanks a lot!</p>