Why does Vue.js use the single-word tag <component>, which violates their own style guide?
I believe Vue.js is doing it's best to stick to the W3C standard.
You may have noticed that Vue components are very similar to CustomElements, which are part of the Web Components Spec. That’s becauseVue’s component syntax is loosely modeled after the spec. For example,Vue components implement the Slot API and the is special attribute.However, there are a few key differences:
The Web Components Spec has been finalized, but is not nativelyimplemented in every browser. Safari 10.1+, Chrome 54+ and Firefox 63+natively support web components. In comparison, Vue components don’trequire any polyfills and work consistently in all supported browsers(IE9 and above). When needed, Vue components can also be wrappedinside a native custom element.
Vue components provide important features that are not available inplain custom elements, most notably cross-component data flow, customevent communication and build tool integrations.
Other reading
The <COMPONENT> element serves as a container to identify an HTMLComponent. It is not required; however, in many instances it may beuseful in order to help the consumer of the HTML Component determinethat an event was in fact fired from this particular component . The<COMPONENT> element serves to bind together the properties, methodsand events as well as to provide a location for the identifier of thisHTC.
Which also specifies <template> and <slot>
HTML templates: The <template> and <slot> elements enableyou to write markup templates that are not displayed in the renderedpage. These can then be reused multiple times as the basis of a customelement's structure.
I don't know about <transition>.