1

I understand that the structure of a web component is something like this:

var template = document.createElement('template');
template.innerHTML = `
<style>
...
</style>
<div class="my-webcomp">
...
</div>
`;

class MyWebComp extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }
  connectedCallback() {...}
  disconnectedCallback() {...}
}

window.customElements.define('my-webcomp', MyWebComp);

And I was wondering if there is a way to write the html code in template.innerHTML = `<HTML CODE>`; in another file ".html" to have the benefit of the editor code recognition and not writing the code between ticks. I tried to use fetch() but couldn't quite get it to work.

dotthor
  • 68
  • 10
  • Have you tried just using a ` – Peter Krebs Feb 02 '23 at 10:48
  • @PeterKrebs no actually. I'll try it right away – dotthor Feb 02 '23 at 10:54
  • Might as well post an answer then. Is your question answered? – Peter Krebs Feb 03 '23 at 10:42
  • @PeterKrebs I was trying to achieve some modularity like folders with js and html for a given component and then import the components as needed, but with this approach i would need to put all the templates for the components in the inedx.html file – dotthor Feb 06 '23 at 09:28
  • 1
    In that case have you tried this? [How to separate web components to individual files and load them?](https://stackoverflow.com/questions/55080103/how-to-separate-web-components-to-individual-files-and-load-them) – Peter Krebs Feb 06 '23 at 09:38
  • @PeterKrebs yep, that's definitely it, thank you. What should I do with this question? – dotthor Feb 06 '23 at 10:34
  • 1
    The question is already marked as a duplicate, so you can leave it as-is. It helps others find the solution through the linked question above, so no worries. – Peter Krebs Feb 06 '23 at 10:53

0 Answers0