title: How to use domProps in render function?
body: <p>here is a custom select component, it works, but I just can not understand some part of the code,</p>
  
  <p><a href="https://jsfiddle.net/0vrvh9c0/" rel="nofollow noreferrer">jsFiddle</a></p>
  
  <pre><code>Vue.component("myselect", {
      props: ['option'],
      render: function (createElement) {
          var self = this    
          var items = []
          for (var i = 0; i &lt; 16; i++) {
              items.push(createElement('option', { attrs: { value: i } }, i))
          }
  
          return createElement('select', {
  
              domProps: { value: self.option.value }, // v-bind:value = this binds the default value
              on: {
                  input: function (event) {
                      console.log(event.target.value)
                  }
              }
          }, items)
      }
  })
  </code></pre>
  
  <p>this sets the default value of select to <code>option.value</code>, is it <code>&lt;select value='2'&gt;</code>, but the html select tag uses <code>&lt;option selected&gt;</code>, looks like magic to me.</p>