Not sure if this is default behavior but I'm trying to build a component in Vue and trying to add attributes like id & class but is not present in the rendered code.
Component
<template>
<input type="text" name="hello" />
</template>
Usage (named md-input)
<md-input class="hello" />
<!-- this will render too wihtout the class attr -->
<input type="text" name="hello" />
Normally, attributes are passed onto the root element of the component, as seen in this demo.
But that can't happen when there are multiple elements in the component, and you'd see a warning in the browser's console:
[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
at <MdInput class="hello" >
at <App>
For that scenario, you could pass on any attribute bindings to the inner input using v-bind="$attrs":
<template>
<label for="hello">My Input</label>
<input type="text" name="hello" v-bind="$attrs" />
</template>
That's a weird behavior, what if you put a default class on the component's template?
<template>
<input type="text" name="hello" class="default" />
</template>
<md-input class="hello" />
<!-- The element should be render like this -->
<input type="text" name="default hello" />