Let's you reuse HTML components very easily, like in Vue, Nuxt, and Next. LOL!
This is what the code block will look like:
// header
class Header extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
`;
}
}
// defining the stuff
customElements.define('main-header', Header);
You will need to change the class Header
to class WhateverNameYouWant
. Don't worry about this:
connectedCallback() {
this.innerHTML =
Don't change that. Just change the
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
to whatever HTML you want.
To make it callable in HTML: <whatever-name-you-want></whatever-name-you-want>
, you need to change this:
customElements.define('main-header', Header);
The 'main-header'
is what you will use to call it in HTML. Then the Header
is the name of the class.
To call the JavaScript file in the <head>
of the HTML by adding <script src='nameOfYourJSFile'></script>
.