javascripthtmlinnerhtmlhtml-components

How to combine HTML web component with HTML file? innerHTML = foo("myfile.html")

With the HTML web components, I understand I can set their HTML code with: 

this.innerHTML = `<h1></h1>`;

The problem I have with this is I miss out on the convenience of Emmet Abbreviation and if I'm making a lot of components, this slows me down.

I need a function which returns the HTML file as a string so I can make it equal to the innerHTML like this:

this.innerHTML = getHTML("myfile.hmtl");

How can this be done?

Solution

  • You can do it with fetch().

    Note that it's an asynchronous function so you should use async/await or Promise().

    this.innerHTML = await fetch( 'myfile.html' ).then( s => s.text() )

    2 implementation examples for Web Components: