“This is the 17th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Writing in the front

  • In a previous article, we mentioned that Web Compontens is a set of native JS technologies that already support component encapsulation. It consists of three main technologies: custom elements, HTML templates, and shadow DOM
  • We have also introduced the use of custom elements, which you may not have seen the benefits of
  • Next we’ll look at the use of HTML templates, which can also work wonders together

HTML Template

  • As the name suggests, an HTML template is onetemplateThe label
  • We can define a specific tag structure inside the template and use it as a template to apply elsewhere as appropriate
  • Templates are not rendered on the page after being parsed by the browser, which means no additional tag nodes are added, as templates in Vue do
  • Without further ado, let’s first write a paragraph to write a demo experience
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body>
    <template>
      <h2>template demo</h2>
    </template>
  </body>
</html>
Copy the code
  • Under normal circumstances, your page runs like this:

  • A strange thing happened. Why did the page display not match our expectations?
  • In fact, as mentioned above, we are not using it correctly
  • The template itself will not be rendered on the page, so we need to extract the content from the template and put it on the page
  • The revised code looks like this
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body>
    <template class="temp">
      <h2>template demo</h2>
    </template>
  </body>

  <script>
    // const templateDom = document.createElement("template");
    // templateDom.innerHTML = `
    // 
       

    // 
template demo

    // 
    / / `;

    const templateDom = document.querySelector(".temp");

    console.log(templateDom.content);

    document.body.append(templateDom.content);
  </script>
</html>
Copy the code
  • Results the following

  • Methods a
    • Define the template tag and its internal structure directly on the page
    • Get the Template DOM element using the querySelect API
    • Extract the content of template, which is the structure content we want to display
    • Finally, add content to the page
  • Method 2
    • Create a template element using the createElement API
    • We then add the specific content we want to display by setting its innerHTML property
    • And you still get the content of the template
    • Finally, add content to the page

summary

  • There is also a slot tag that needs to work better with template
  • Slot vUE slot VUE slot
  • Powerful native JavaScript has long been implementedslotOr evenA named slot
  • The use of template and slot in combination will be covered in the next article

The last

  • That’s all for today’s sharing. Please leave your comments in the comments section
  • If you think the article is good, I hope you don’t begrudge praise, everyone’s encouragement is the biggest power I share 🥰