What exactly is a DOM Template in Vue.js?

user_10695267 0
Viewed 2284

I couldn't find exact definition of Dom template in Vue docs but I see it mentioned in several places such as here: https://v3.vuejs.org/style-guide/#self-closing-components-strongly-recommended

So what exactly are DOM templates? Is that Vue's concept or something more general (eg. HTML concept defined in some specs)? Are they just HTML elements that are outside <template> tag that Vue can attach to or they can also be inside <template> tag? Examples are welcome.

vue.js html javascript
2 Answers

In the context of Vue, "DOM template" (commonly seen as "in-DOM template" in the rest of the Vue docs) refers to a component's markup specified in the document body/head, as opposed to a string template or SFC template.

While DOM templates include <script type="text/html"> or <template> in the document, these two tags (along with string templates and SFC templates) are not subject to the known DOM template parsing caveats because they're inert.

DOM templates

in-DOM template:

// index.html
<body>
  <div id="app">
    <ul>
      <li v-for="i in 5">{{ i }}</li>
    </ul>
  </div>
</body>

demo

in-DOM template with <script type="text/html">:

// index.html
<body>
  <script type="text/html" id="my-comp-template">
    <ul>
      <li v-for="i in 5">{{ i }}</li>
    </ul>
  </script>

  <div id="app">
    <my-comp></my-comp>
  </div>
</body>

demo

in-DOM template with <template>:

// index.html
<body>
  <template id="my-comp-template">
    <ul>
      <li v-for="i in 5">{{ i }}</li>
    </ul>
  </template>

  <div id="app">
    <my-comp></my-comp>
  </div>
</body>

demo

String templates

// MyComponent.js
Vue.component('my-comp', {
  template: `<ul>
               <li v-for="i in 5">{{ i }}</li>
             </ul>`
})

demo

SFC templates

// MyComponent.vue
<template>
  <ul>
    <li v-for="i in 5">{{ i }}</li>
  </ul>
</template>

demo

user_62771510

So what exactly are DOM templates? Is that Vue's concept or something more general (eg. HTML concept defined in some specs)?

You're not far off. This refers to one or more template tags that are meant to be, or has been, parsed and included in the DOM. You can find the spec for it here: HTML Standard 4.12.3 - "The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script.".

In the link you've shared, the term "DOM template" is used to differentiate:

  1. The result of creating a fragment of HTML in a template tag - perhaps in a template string defined in your Vue instance - to be attached to the HTML in the same file.
  2. The result of creating a Single-File component that contains template markup, a script tag that exports a component's instance, and optionally a style tag that to define some scoped CSS.

You're generally correct in your assumptions, Vue uses template tags with standard HTML in them - as opposed to JSX or some other flavor of markup. So you can expect to use the HTML you're used to in a Vue template tag, along with custom tags you define for the components you create - or the components from dependencies/libraries you choose to use.

As a side note, Vue works some auto-magic to translate templates and attach them to the DOM at runtime. This may include changing the name of your component tags to be a div with a class name of your component name. Occasionally you may run into edge-case issues where the browser does something to parse your component markup in the template tag before Vue can translate it... resulting in tags rendering improperly. As Vue has matured for the last few years, this has gotten to be farrrr less prevalent. Using Single-File components has seemed to alleviate things like this in my experience.

user_44834990
Related