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

Question

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?

Supersharp · Accepted Answer · 2020-05-29 11:42:01Z

3

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:

answered May 29, 2020 at 11:30

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Note, this will fetch the html file for every instance of the element on the page (as well as parse the HTML for every instance).