11

So, Vue.js has its own style guide, which clearly states (in the "essential" section) that component names should be multi-word to prevent "conflicts with existing and future HTML elements, since all HTML elements are a single word".

Yet they use the <component> tag for dynamic components. I couldn't find <component> in the list of existing HTML tags. Does this mean that if one day HTML adopts a <component> tag, Vue.js will try to parse them and break?

Please clarify.

Improve this question
4
  • 1
    I think this may be best directed to their forums. forum.vuejs.org Commented Dec 6, 2018 at 5:36
  • i will post there too, thank you for suggestion Commented Dec 6, 2018 at 5:38
  • Also, template, slot and transition. Commented Dec 16, 2018 at 3:08
  • I also posted on the Vue forums, hoping to discuss/elaborate the reasoning behind this rule: forum.vuejs.org/t/… Hopefully someone joins in. Commented Apr 4, 2022 at 3:01

1 Answer 1

Reset to default
2

I believe Vue.js is doing it's best to stick to the W3C standard.

Relation to Custom Elements

You may have noticed that Vue components are very similar to Custom Elements, which are part of the Web Components Spec. That’s because Vue’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 natively implemented in every browser. Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components. In comparison, Vue components don’t require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element.

Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.

Other reading

HTML Components

The <COMPONENT> element serves as a container to identify an HTML Component. It is not required; however, in many instances it may be useful in order to help the consumer of the HTML Component determine that an event was in fact fired from this particular component . The <COMPONENT> element serves to bind together the properties, methods and events as well as to provide a location for the identifier of this HTC.

Which also specifies <template> and <slot>

Web Components

HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.

I don't know about <transition>.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.