He copiado/pegado el código de la página de juegos de lit.dev para solucionar problemas e intentar que Lit se ejecute en VS Code antes de trabajar en mi propio proyecto. Pude solucionar la mayoría de mis problemas y finalmente conseguí que funcionara correctamente, pero parece que el elemento personalizado 'saludo simple' simplemente no se muestra al iniciarse.
Aquí está mi html:
<!DOCTYPE html> <head> <script type="module" src="./app.js"></script> </head> <body> <simple-greeting name="World"></simple-greeting> </body>Aquí está mi 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);Aquí está mi launch.json:
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "file": "${workspaceRoot}/index.html" } ] }Aquí está mi jsconfig:
{ "compilerOptions": { "module": "commonjs", "target": "es6", "experimentalDecorators": true, "allowJs": true }, }Y finalmente, aquí está mi paquete.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" } } ¿Por qué no se renderiza mi elemento personalizado? Chrome se inicia, pero la página está en blanco a menos que agregue otro componente de prueba como <p>Hello, World!</p> , que parece funcionar bien.
Tuve un problema similar con un proyecto diferente y parece que el problema era que estaba ejecutando mi código a través de la extensión Live Server en VS Code o no estaba ejecutando un servidor web en absoluto.
Iniciar un servidor de desarrollo web usando esto pareció solucionar el problema.