title: Create text node with custom render function in Vue.js
body: <p>I'm using a <code>my-link</code> component to wrap an anchor tag on demand around various items. For that purpose a custom <code>render</code> method is used - however the <code>createElement</code> method can only create HTML nodes, creating plain text nodes does not seem to be possible.</p>
  <h2>Current scenario</h2>
  <h3>Usage of <code>my-link</code> component</h3>
  <pre><code>&lt;template v-for=&quot;item in items&quot;&gt;
    &lt;h4&gt;
      &lt;my-link :url=&quot;item.url&quot;&gt;{{ item.text }}&lt;/my-link&gt;
    &lt;/h4&gt;
  &lt;/template&gt;
  </code></pre>
  <h3>Implementation of <code>my-link</code> component as <code>Link.vue</code></h3>
  <pre><code>&lt;script&gt;
  export default {
    name: 'my-link',
    props: { url: String },
    render(createElement) {
      if (this.url) {
        return createElement(
            'a', {
              attrs: { href: this.url }
            }, this.$slots.default
        );
      }
  
      return createElement(
          'span',
          this.$slots.default
      );
    }
  };
  &lt;/script&gt;
  </code></pre>
  <h3>Resulting HTML</h3>
  <pre><code>&lt;h4&gt;
    &lt;a url=&quot;/some-link&quot;&gt;This item is linked&lt;/a&gt;
  &lt;/h4&gt;
  &lt;h4&gt;
    &lt;span&gt;Plain text item&lt;/span&gt;
  &lt;/h4&gt;
  </code></pre>
  <h2>Desired scenario</h2>
  <p>The <code>span</code> tag in this particular scenario is superfluous and could be avoided - however, it's not clear to me, how and whether at all this is possible with Vue.js. In general, I'd like to know how to create plain text nodes using a custom <code>render</code> method.</p>
  <pre><code>&lt;h4&gt;
    &lt;a url=&quot;/some-link&quot;&gt;This item is linked&lt;/a&gt;
  &lt;/h4&gt;
  &lt;h4&gt;
    Plain text item
  &lt;/h4&gt;
  </code></pre>
  <hr />
  <p>Side-notes:</p>
  <ul>
  <li>question was originally raised for VueJS v2.1 &amp; v2.2-beta (February 2017)</li>
  <li>focus was on proper semantic nodes (text node vs. element node)</li>
  </ul>