🔸<template>

browserweb componentsimplement ⟩ HTML templates

<template> tags (and their children):

Use a <template> element to clone DOM, instead of setting shadowRoot.innerHTML. 👉 Custom ElementsElement-defined Content

HTML templates examples

💾 replit.com

  • can put <style> and <script> into <template> as well.

<!-- styles and scripts in template -->
<template>

  <style>
    p { font-weight: bold; }
  </style>
  
  <script>
    alert("Hello");
  </script>
  
</template>
<!-- web component -->
<my-component>
  a "none" error message
</my-component>

<my-component kind="warning">
  this is a warning
</my-component>

<my-component kind="error">
  this is an error message
</my-component>

Last updated