title: Vue.js automatically converting Web Components to elements
body: <p>I am using Vue.js in an app, but only for parts that require more logic. Otherwise I stick with Web components.</p>
  <p>I hit an issue when I am try to mix those. I have a Web Component that only extends an existing element (input in my case). Without Vue.js everything works as expected, but inside Vue, &quot;is&quot; is a Vue attribute (<a href="https://v2.vuejs.org/v2/api/#is" rel="nofollow noreferrer">docs</a>) and thus entire element is converted to a name element as specified there.</p>
  <p>To give an example, HTML without Vue.js stays as is:</p>
  <pre><code>&lt;input type=&quot;text&quot; is=&quot;test-autocomplete&quot; name=&quot;search&quot; /&gt;
  </code></pre>
  <p>But with Vue.js, it becomes:</p>
  <pre><code>&lt;test-autocomplete type=&quot;text&quot; name=&quot;search&quot;&gt;&lt;/test-autocomplete&gt;
  </code></pre>
  <p>Which is wrong. It should stay the same as in first case.
  Searching on the web, the only solution I found is to set ignored elements as:</p>
  <pre><code>Vue.config.ignoredElements = [
    'test-autocomplete',
    /^test-/
  ];
  </code></pre>
  <p>But it does not work and here is where I started running out of ideas. Any help from this point how to make it work is appreciated!</p>
  <p>I created a minimum fiddle, where my issue is reproduced. I'd expect both outputs to render identically.
  <a href="https://jsfiddle.net/q2cre9po/2/" rel="nofollow noreferrer">https://jsfiddle.net/q2cre9po/2/</a></p>