Web Components without writing HTML inside Javascript

Question

I have been reading and tried few web components implementations available to my knowledge and what I don't like in all of them is that they write HTML code for the component inside Javascript/JSX/Typescript.

Frameworks/Implementations I went through:

Polymer: Polymer 1 & 2 felt good since they were doing all the definition using HTML imports and had HTML separate and the JS code separate. But, with Polymer 3, they are also going for React like syntax writing HTML inside JS which I don't like.

Vanilla Webcomponents: It was surprising to see that even vanilla web component specs are like React having HTML inside JS code: https://www.webcomponents.org/introduction again which is something I don't like.

Stencil: While this tool looks promising, I still have the same problem that I have to write the HTML needed for the component inside JS and then it converts it into vanilla JS.

X-Tag: Same issue, HTML inside JS.

Is there any implementation where we don't write HTML within Javascript to use Web Components?

My main reason behind this is Separation of Concerns and I am not able to gel well with it since conventionally the web seemed good separating skeleton, styling and DOM mainpulations separate as HTML, CSS and JS files and now, we are combining everything together which feels messy for me.

And this is one of the main reasons I don't like React as well where we write HTML-Like syntax within javascript.

I'm not sure what you are aiming at but: If you want the user to see different contents of the page, you need to (somehow) update the DOM, and this cannot be done within HTML unless you embrace a framework that does the job for you (without you needing to write HTML strings within your JS). You may find a good candidate in Angular (I'm particularly fun of the initial approach of it, meaning AngularJS). Hope this somehow matches your expectations. — FDavidov
– FDavidov, Commented May 5, 2018 at 9:58
@FDavidov: I understand what you are saying but its not only me who feels this way. You can find similar concerns raised here: github.com/Polymer/polymer/issues/4806 — Vignesh T.V.
– Vignesh T.V., Commented May 5, 2018 at 10:11
You are talking about having different teams development different areas of the same system (i.e. HTML on one side, JS on the other), right? — FDavidov
– FDavidov, Commented May 5, 2018 at 10:15
@FDavidov: Yes, also that and also making the code base separate so that its neat and understandable. — Vignesh T.V.
– Vignesh T.V., Commented May 5, 2018 at 10:23
In that case, I STRONGLY recommend you take a look at Angular(JS). HTML and JS development can perfectly run in parallel provided you clearly set the interfaces between them upfront. I could send you an endless list of examples, but you can find then quite easily. Hope this pushes you forward (at least a little). — FDavidov
– FDavidov, Commented May 5, 2018 at 10:31

Supersharp · Accepted Answer · 2018-05-06 16:17:55Z

2

With vanilla Web Components you can decide to separate HTML, Javascript and CSS into diffrent files. It's up to you!

I've developped some complete applications where every component (custom elements) were defined with 3 files: HTML, JS and CSS.

The HTML content is put in a <template> element, and cloned to be inserted in the custom element when it is created.

The HTML file can be imported at runtime via HTML Imports or with fetch() or a XMLHttpRequest object. Alternately, it can be merged (automatically) with Javascript and CSS at build time to constitute only one file to be downloaded.

I don't know the other frameworks but I suppose that for some of them it could be possible, too.

answered May 6, 2018 at 16:17

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

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

Collectives™ on Stack Overflow

Web Components without writing HTML inside Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related