5 ms·

I like the idea of web components, but really dislike html and js being intermingled (the reason I don't like React/JSX). In web components its even worse becau

I like the idea of web components, but really dislike html and js being intermingled (the reason I don't like React/JSX). In web components its even worse because its HTML as a string which means it has no validation and isn't syntax aware. I much prefer the angular approach where you have separate css,html,ts files, and would love a web component framework that could work similarly. Searching for this I found some kinda hacky solutions on Stack Overflow which use fetch to load html/css at runtime.

paulddraper 3y ago
> its HTML as a string Can you explain what you mean by that?
- IshKebab 3y ago
  React uses JSX/TSX which is much better because it is syntax checked and even type checked in the case of TSX.
- thfuran 3y ago
  Html as a string literal in code rather than the html being in a separate .html file.
- itslennysfault 3y ago
  This is the example from the article, and pretty common practice for web components. As far as an IDE is concerned this is just a string of text (it doesn't know/care that it is html). This makes it more error prone as the IDE can't catch syntax errors in the html. connectedCallback() { this.shadow.innerHTML = ` <p>Hello from a web component!</p> <style> p { color: pink; font-weight: bold; padding: 1rem; border: 4px solid pink; } </style> `; }
  - paulddraper 3y ago
    Well, you can use `innerHTML` and a string, but you don't have to. But there several alternatives: 1. Use DOM APIs (createElement). 2. Fetch the HTML as a separate resource. 3. Have the HTML in a separate file and bundle it with a bundler. 4. Use React/JSX. 5. Use a preferred templating library of your choice. You can do whichever of these you like the most
claytongulick 3y ago
If you use a good rendering library, like lit-html then (at least in vscode) you get very nice syntax highlighting, completion and validation: html` <this is all syntax highlighted> `
- itslennysfault 3y ago
  I was actually just looking at that after posting this (lit is new to me). That's a pretty cool solution. I'd still prefer an option to have the html in its own file, but that is just my taste. I know a lot of people feel exactly the opposite.
  - claytongulick 3y ago
    Maybe a bit pedantic - but I prefer using lit-html, not lit. Lit is a bit too "frameworky" for my taste, I generally just use vanilla classes that extend HTMLElement and have a render function that renders the lit-element template to the light dom. Something like: import {html, render} from 'lit-html'; class AppComponent extends HTMLElement { connectedCallback() { this.template = () => html`<markup here>`; this.render(); } render() { if(this.template) render(this.template(), this) } } customElements.define('app-component', AppComponent);
    - itslennysfault 3y ago
      Perfect, and perfect timing. I was recently tasked with creating a small standalone web app and everything feels like overkill to me. This might be the perfect fit. Thanks for the explanation.
fuzzy2 3y ago
Then… use Angular Elements? Using innerHTML isn’t specific to Web Components in any way. It was and is a quick & dirty way to dynamically insert HTML.
yohannparis 3y ago
You can use `<template>` for that purpose and keep your separation of concerns okay.
- gitaarik 3y ago
  Indeed, the Web Components APIs don't demand that you put the HTML and JS together. You can use it and structure it to your own likes.
- MrDresden 3y ago
  As a non web dev I had to look this up and yeah, this looks like a very sane and clean way to separate concerns and get proper handling from IDEs: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...
djrenren 3y ago
Web Components are really just the minimal APIs required to allow the implementation of new HTML elements. This includes things like: - Responding to being attached to the DOM - Encapsulating DOM nodes (the Shadow DOM) - Scoped styling (Shadow DOM + User defined stylesheets + CSS parts) It is definitively not a templating engine. It doesn't provide any new APIs for creating DOM nodes, or mutating them a la React or handlebars or lit-html. Templating is basically the "next step up the stack". Using shadowDom.innerHTML = `...`; is basically a stand-in for having an actual templating engine. There is work going on, developing a native templating system in the browser which may interest you. It's called the DOM Parts proposal and you can find info on it here: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/DOM-Parts.md https://github.com/WICG/webcomponents/blob/gh-pages/proposal...
jacobsimon 3y ago
I like React but I actually agree with you re: JSX, it helps me to remember that JSX is 'just javascript' - it's a syntactical shorthand for creating a component tree, which then happens to be rendered into HTML.
_lvbh 3y ago
Rather than putting the HTML in JS, you can fetch HTML in the JS. E.g. https://github.com/g-utils/WebComponentFactory https://github.com/g-utils/WebComponentFactory

paulddraper 3y ago

> its HTML as a string Can you explain what you mean by that?

IshKebab 3y ago
React uses JSX/TSX which is much better because it is syntax checked and even type checked in the case of TSX.
thfuran 3y ago
Html as a string literal in code rather than the html being in a separate .html file.
itslennysfault 3y ago
This is the example from the article, and pretty common practice for web components. As far as an IDE is concerned this is just a string of text (it doesn't know/care that it is html). This makes it more error prone as the IDE can't catch syntax errors in the html. connectedCallback() { this.shadow.innerHTML = ` <p>Hello from a web component!</p> <style> p { color: pink; font-weight: bold; padding: 1rem; border: 4px solid pink; } </style> `; }
- paulddraper 3y ago
  Well, you can use `innerHTML` and a string, but you don't have to. But there several alternatives: 1. Use DOM APIs (createElement). 2. Fetch the HTML as a separate resource. 3. Have the HTML in a separate file and bundle it with a bundler. 4. Use React/JSX. 5. Use a preferred templating library of your choice. You can do whichever of these you like the most

claytongulick 3y ago

If you use a good rendering library, like lit-html then (at least in vscode) you get very nice syntax highlighting, completion and validation: html` <this is all syntax highlighted> `

itslennysfault 3y ago
I was actually just looking at that after posting this (lit is new to me). That's a pretty cool solution. I'd still prefer an option to have the html in its own file, but that is just my taste. I know a lot of people feel exactly the opposite.
- claytongulick 3y ago
  Maybe a bit pedantic - but I prefer using lit-html, not lit. Lit is a bit too "frameworky" for my taste, I generally just use vanilla classes that extend HTMLElement and have a render function that renders the lit-element template to the light dom. Something like: import {html, render} from 'lit-html'; class AppComponent extends HTMLElement { connectedCallback() { this.template = () => html`<markup here>`; this.render(); } render() { if(this.template) render(this.template(), this) } } customElements.define('app-component', AppComponent);
  - itslennysfault 3y ago
    Perfect, and perfect timing. I was recently tasked with creating a small standalone web app and everything feels like overkill to me. This might be the perfect fit. Thanks for the explanation.

fuzzy2 3y ago

Then… use Angular Elements? Using innerHTML isn’t specific to Web Components in any way. It was and is a quick & dirty way to dynamically insert HTML.

yohannparis 3y ago

You can use `<template>` for that purpose and keep your separation of concerns okay.

gitaarik 3y ago
Indeed, the Web Components APIs don't demand that you put the HTML and JS together. You can use it and structure it to your own likes.
MrDresden 3y ago
As a non web dev I had to look this up and yeah, this looks like a very sane and clean way to separate concerns and get proper handling from IDEs: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...

djrenren 3y ago

Web Components are really just the minimal APIs required to allow the implementation of new HTML elements. This includes things like: - Responding to being attached to the DOM - Encapsulating DOM nodes (the Shadow DOM) - Scoped styling (Shadow DOM + User defined stylesheets + CSS parts) It is definitively not a templating engine. It doesn't provide any new APIs for creating DOM nodes, or mutating them a la React or handlebars or lit-html. Templating is basically the "next step up the stack". Using shadowDom.innerHTML = `...`; is basically a stand-in for having an actual templating engine. There is work going on, developing a native templating system in the browser which may interest you. It's called the DOM Parts proposal and you can find info on it here: https://github.com/WICG/webcomponents/blob/gh-pages/proposals/DOM-Parts.md https://github.com/WICG/webcomponents/blob/gh-pages/proposal...

jacobsimon 3y ago

I like React but I actually agree with you re: JSX, it helps me to remember that JSX is 'just javascript' - it's a syntactical shorthand for creating a component tree, which then happens to be rendered into HTML.

_lvbh 3y ago

Rather than putting the HTML in JS, you can fetch HTML in the JS. E.g. https://github.com/g-utils/WebComponentFactory https://github.com/g-utils/WebComponentFactory