Web Components Crash Course
Why Stack Overflow recommends it
Stack Overflow users link it as a beginner-friendly walkthrough when someone needs to learn custom elements, shadow DOM or HTML templates from scratch.
Recommended by 2 people across 2 different months, 2017 to 2022.
What it is
A 29-minute introductory crash course by Brad Traversy on building web components in plain JavaScript. It covers custom elements, the shadow DOM and HTML templates, with a CodePen to follow along.
What people said
Recommends Ricardo Sanchez · 2020-10 · Stack Overflow · on “Javascript Quiz Score saved to next pages”
You are getting into complex territory, as simple as it may seem. I'll suggest to try and make it a single page application, that way it will be much easier to keep track of the user's score or similar data, like name for example. Here is a video on how to make your own Web Components [this video] it may seem a bit intimidating at first but the instructor is very good at explaining the concepts from scratch, hope that helps.
Recommends Serge Hulne · 2022-03 · Stack Overflow · on “why does tsc dump the "extends ..." part of the following Typescript class when compiling to JavaScript?”
Here is a good introductory tutorial about custom elements / web components / html templates / shadow dom : [this video]
Cites DevWL · 2017-10 · Stack Overflow · on “Defining a HTML template to append using jQuery”
Use HTML template instead! Since the accepted answer would represent overloading script method, I would like to suggest another which is, in my opinion, much cleaner and more secure due to XSS risks which come with overloading scripts. I made a demo [LINK] to show you how to use it in an action and how to inject one template into another, edit and then add to the document DOM. example html <template id="mytemplate"> <style> .image{ width: 100%; height: auto; } </style> <a href="#" class="list-group-item"> <div class="image"> <img src="" /> </div> <p class="list-group-item-text"></p> </a> </template> example js // select var t = document.querySelector('#mytemplate'); // set t.content.querySel