Hacker News Reader

Comment by itslennysfault | Hacker News Reader

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.

View on HN

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/proposal...

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.

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>
    `

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.

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

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.

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

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_compone...

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.

Rather than putting the HTML in JS, you can fetch HTML in the JS.

E.g. https://github.com/g-utils/WebComponentFactory

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.

> its HTML as a string

Can you explain what you mean by that?

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>
    `;
  }

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

Html as a string literal in code rather than the html being in a separate .html file.

React uses JSX/TSX which is much better because it is syntax checked and even type checked in the case of TSX.

Reply on news.ycombinator.com