Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: