In every web component tutorial I see people building their custom elements just putting HTML and CSS inside JS (as a string value to an object property). What makes me wonder: Is there a way to make web components without mixing layout, style and behavior like that?
Being more specific, is it possible to build a web component separating the code into three files (.html, .css and .js)? Or even making a single file, but having the code split into three tags (<template>, <style> and <script>)?
Possible duplicate: How to separate web components to individual files and load them?
Here the author of the accepted answer proposed creating a javascript file that uses fetch() to load the HTML source code for the component. Then inside the HTML file link the separate CSS file using <link rel="stylesheet">
Inside your main HTML file you can then import the script that you create in the first step to load the web component.
This is just a summary, i invite you to check it out by yourself :) Cheers