title: How do you refer to a VueJS component's name within the template's raw HTML / x-referenced ID element?
body: <p>I'm essentially trying to add a CSS class to my VueJS components based on the <code>component-name</code> it's registered under (to give all those specific types of components the same style).</p>
  
  <p>For example: </p>
  
  <pre><code>Vue.component('dragdropfile', {
      // This refers to a unique template element (see HTML below)
      template: "#dragdropfile-tmp",
      props: ['action']
  });
  </code></pre>
  
  <p>And in the Vue component template:</p>
  
  <pre><code>&lt;template id="dragdropfile-tmp"&gt;
      &lt;form action="{{action}}" method="post" enctype="multipart/form-data"&gt;
          &lt;div class="fallback"&gt;
              &lt;input name="file" type="file" multiple /&gt;
          &lt;/div&gt;
          &lt;div class="dz-message" data-dz-message&gt;
              &lt;div class="dz-default"&gt;
                  &lt;!--
                      According to VueJS docs / forums, "slot" gets replaced by any innerHTML
                      passed from the incoming component usage.
                  --&gt;
                  &lt;slot&gt;&lt;/slot&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And finally, how it's used in the "index.html" page is like this:</p>
  
  <pre><code>&lt;dragdropfile id="someDragDropFiles" action="/upload-please"&gt;
    Do you have files to upload?&lt;br/&gt;
    &lt;b&gt;Drop it here!&lt;/b&gt;
  &lt;/dragdropfile&gt;
  </code></pre>
  
  <p>Now, although I could put in the component-name manually for each component HTML templates, I want to automate this.</p>
  
  <p>Are there any special built-in <code>{{binding}}</code> names that Vue uses internally so that I can inject the component-name into the resulting component on the page?</p>
  
  <p>To result something like so:</p>
  
  <blockquote>
    <p>&lt;form class="<strong>dragdropfile</strong>" id="someDragDropFiles" action="/upload-please" ... &gt;<br/> ...<br/>&lt;/form&gt;</p>
  </blockquote>
  
  <p>Or do I simply need to pass it myself as a new component property? As in:</p>
  
  <ul>
  <li>Manually call it like <code>props: ["componentName", ...]</code> and;</li>
  <li>Refer to it in the template as <code>&lt;form class='{{componentName}}' ...&gt;</code></li>
  </ul>
  
  <p>Is this the only feasible way?</p>
  
  <h1>Using VueJS version: 1.0.17</h1>
  
  <p>(<a href="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js</a>)</p>