As I follow the LitElement guide provided here: , I meticulously adhere to each step mentioned and then execute polymer serve in my project's root directory.
I diligently clone every file from their example stackblitz pages. Is it possible that using polymer serve is not the correct approach?
Despite my efforts, all I encounter is a blank page, with no recognition of the customElement being displayed.
https://i.sstatic.net/MMIin.png
Here is my-element.ts:
import { LitElement, html, customElement, property } from 'lit-element';
@customElement('my-element')
export class MyElement extends LitElement {
@property()
foo = 'foo';
render() {
return html`
<p>hi!</p>
`;
}
}
This is index.ts:
import './my-element.ts';
And here's the content of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<title>lit-element code sample</title>
</head>
<body>
<my-element></my-element>
</body>
</html>
Lastly, let's look at package.json:
{
"name": "my-app",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"@webcomponents/webcomponentsjs": "^2.2.10",
"lit-element": "^2.1.0"
}
}