How to use HTML <Template> tag
Write your code block and wrap that up with template tag and name the id as you want.
That template block does not be shown on the page.
You can get the template block with querySelector. and you can manipulate and store for a kind of repetitive tasks.
With this tag, you can save yourself from a lot of efforts and do without template frameworks like React, Vue, and Svelte
Alternative way: not using cloneNode() method.
If you made an element using “template.content.cloneNode(true)”, You cannot access the under of the element as a normal HTML element. What you can see is the only “document-fragment”. and that has not child, childNodes.
But if you make a new element using “template.innerHTML” that will work as a normal HTML element.
manipulating template
usage
Now, as you can see in the “toast.ts”, I’d made a new div and fill in with the template’s innerHTML. and for further manipulate, I’ve used the return value of the “appendChild” method.