Templating Headers and Footers with Custom HTML Elements

Don't rewrite your HTML, reuse it!
How to use customElements.define()

[@TheeEpicScout]

Subscribing to you right after that. I went for hours on end looking for a tutorial like this. It works perfectly. Thank you so much!

[@absprog]

That's great to hear👍
Thanks for subscribing

[@osvaldoribeiro428]

Simple, elegant, effective solution. Thank you so much!

[@absprog]

Glad it helped!

[@berkoo5497]

I want to thank you so much for this video !!! I search since days for a video like this 🙌🏾

[@TackleProd]

Thanks! You can also do it like this getting from a file, so you dont have to write everything as as a string:
the manager js file:
class SpecialHeader extends HTMLElement {
async connectedCallback() {
const htmlFile = 'path/to/your/header.html'; // Replace with the actual path to your HTML file
try {
const response = await fetch(htmlFile);
if (!response.ok) throw new Error('Network response was not ok');

const content = await response.text();
this.innerHTML = content;
} catch (error) {
console.error('Failed to load the HTML file:', error);
this.innerHTML = 'Error loading content';
}
}
}
customElements.define('special-header', SpecialHeader);

[@sonnyl2915]

Css for this? How to implement it? Using styles defined inside the js file or link css external file into the index html template elements?

[@illegaldream]

what will happen for the css? for me mobile navbar isn't working.

[@alexander499zero]

Is it possible to put the html header & footer into a separate HTML file?

[@charlesmontilla]

Why doesn't a language that is "so modern" have a simplified specification like: " include 'header.js' ", or " require 'footer.js' "
Just like the "old", "ancient", "backward" and "dead" PHP?

[@absprog]

😄

[@ksaaruonyt]

One Problem though - whatever is written as the title of the page gets applied to all pages. So for example, if on index page - we write 'Welcome to XYZ' even on Contact Us page or privacy policy page, it still says the same. Is there a solution to customize the page title?

[@patriciaaguiardeoliveira8757]

Thanky you very much for the video. I have a question: Is it possible to use a link for a CSS file instead of use the "

[@ThirunaSamarasingha]

I do not know is a good idea but what I did was create another CSS file just for the header and footer code and link it to the HTML file works fine

[@QueenMaryyoutub]

Unfortunately, I tried it out and it was not working. I have a nav bar and menu that I want to put on 3 other pages. did the same replaced the nav bar code with the special header and embedded the HTML nav bar code to the js file but no change. thanks the video was clear though.

[@alistairjames1603]

Just what I needed - a high speed zip through the process to show it is really not that hard to do.

[@absprog]

Thanks for the feedback!

[@mahidmunna01]

Thanks ❤️💥

[@absprog]

You're most welcome!👍

[@jaturon2746]

thank you

[@absprog]

Welcome!

[@Human_Evolution-]

I thought it was bad practice to use innerHTML. Something about being hackable.

[@Human_Evolution-]

@Music-p4l so it's basically only when it's something like an Input eh?

[@genchebanu]

@@Human_Evolution- yes. If you don't have user-supplied data its not a security risk

[@Human_Evolution-]

@@genchebanu tanx

[@renejacques8288]

Great video

[@absprog]

Thanks!

[@sujith1359]

Bro it's not working 😢

[@PurpleWarlock]

Your videos don't show up on my subscription feed. :/

[@absprog]

I typically upload a new video once a week, usually on Fridays or Saturdays. Thank you for your support

[@Maolana_ModiG]

will bootstrap support on in this?

[@yassineboussif]

assalamo-alaikum
the same problem
if u find any solution please let me know

[@focussi3003]

It's working with tailwind on my end, so it should be work with bootstrap too