'VS Code: Lit custom element not rendering properly

I've copied/pasted the code from lit.dev's playground page to troubleshoot and attempt to get Lit running in VS Code before working on my own project. I was able to troubleshoot most of my issues and finally got it to run correctly, but it seems that the custom element 'simple-greeting' is simply not rendering upon launch.

Here's my html:

<!DOCTYPE html>
<head>
  <script type="module" src="./app.js"></script>
</head>
<body>
  <simple-greeting name="World"></simple-greeting>
</body>

Here's my js:

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

Here's my launch.json:

{
    "version": "0.2.0",
    "configurations": [
    
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",            
            "file": "${workspaceRoot}/index.html"
        }
    ]
}

Here's my jsconfig:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "experimentalDecorators": true,
    "allowJs": true
  },
}

And finally, here's my package.json:

{
  "name": "epigraph_tictactoe",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Cameron Crane",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "common-js": "^0.3.8",
    "lit": "^2.2.0",
    "ts-node": "^10.7.0"
  }
}

Why won't my custom element render? Chrome itself launches, but the page is blank unless I add another test component like <p>Hello, World!</p>, which seems to work just fine.

javascripthtmlvisual-studio-codelit


Solution 1:[1]

Had a similar issue with a different project and it looks like the issue was that I was either running my code through the Live Server extension on VS Code, or I was not running a web server at all.

Starting a web dev server using this seemed to fix the issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions