Separation of Concerns in Web Components

Question

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>)?

Have you tried creating a **single** file with the 3 tags you mentioned? — Danny '365CSI' Engelman, Feb 21 '22 at 18:42
I guess we'll have to wait for HTML modules, and CSS module scripts to land in browsers. — connexo, Feb 22 '22 at 22:56

score 0 · Answer 1 · answered Feb 21 '22 at 04:27

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

Separation of Concerns in Web Components

1 Answers1