Menu
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.
727
User component names should always be multi-word, except for root App components. This prevents conflicts with existing and future HTML elements, since all HTML elements are a single word.
A single-file component is composed of three parts: The <template> section which contains the component's markup in plain HTML. The <script> section which contains all the JS logic within that component. The <style> section which contains all the component styles.
One important feature of Vue is the ability to use components. Components are reusable Vue instances with custom HTML elements. Components can be reused as many times as you want or used in another component, making it a child component. Data, computed, watch, and methods can be used in a Vue component.
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.
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>.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
