It was always HTML

Yogisha,•HTMLvuetags
Back

It was always HTML

When I first started programming with vue, I thought that template and slot were elements of vue. Until today, I was wrong. It was HTML elements. <slot> is a HTML element. <template> is a HTML element.

A peek of how I used them:

<project>
  <a href="https://parallax-eight.vercel.app/" target="_blank">
    <img
      slot="pic"
      class="w-full"
      src="https://i.imgur.com/6tSk3Kp.png"
      alt=""
    />
    <p
      slot="project-name"
      class="text-xl h-10 hover:text-red-500 text-orange-200 text-center"
    >
      Parallax
    </p>
  </a>
</project>
Vue.component("project", {
  template: `
        <div class="column is-one-third p-16">
            <div class="max-w-sm rounded overflow-hidden shadow-lg">
                <slot><slot name="pic"></slot>
                <div class="px-6 py-4">
                        <div class="font-bold text-xl mb-2">
                        <slot name="project-name"></slot></div>
                    </div></slot>
            </div>
         </div> 
    `,
});

It was not wrong way to use them. From what I was taught and from what I learnt today, it was a good way to use it. As such, going into what I learnt about them is: <template> is similar to fragments. They are not rendered as soon as page is loaded but rather rendered during Javascript runtime. Similarly, <slot> is a placeholder for HTML elements.

Furthermore, some useful HTML elements I discovered today are:

<!-- this element can be useful for color picker. -->
<input type="color" />
 
<!-- can be used for footer/contact address content. SEO friendly -->
<address>
  <a href="mailto:john@mail.com">john@mail.com</a>
  <a href="tel:+14155550132">+1 (415) 555‑0132</a>
</address>
 
<!-- option groups for dropdowns or general selection components. I would group them in `div` before -->
<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
</select>
 
<!-- this is such that user agents should customize the display of the page
 or of the surrounding user interface. Not sure where I would use it, but new
  and fun thing to learn and try -->
<meta name="theme-color" content="#4285f4" />
 
<!-- pattern attributes validates the form input. It takes regex. If a non-null value 
doesn't conform to the constraints set by the pattern value, the ValidityState
 object's read-only patternMismatch property will be true. -->
<input type="number" name="pin" id="pin" pattern="\d{4,4}" />

Learning HTML again, I felt like maybe I was missing out on some of the useful tags and elements.