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.