Question

在此处遵循LitElement指南：https://lit-element.polymer-project.org/guide/start

我从字面上跟随它，然后运行 awaiting在项目的根目录中。

我什至复制/粘贴了示例stackblitz页面中的每个文件。我不应该使用聚合服务或其他服务吗？

我得到的只是空白页，而且似乎无法识别customElement

my-element.ts：

polymer serve

index.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>
    `;
  }
}

index.html：

import './my-element.ts';

package.json：

<!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>

Answer 1

我什至复制/粘贴了示例堆叠闪电页面中的每个文件

实际上，Stackblitz TS项目遵循特定的结构，其中index.ts被视为TypeScript代码的入口点，并自动编译并导入最终结果。

当地情况大不相同：您必须选择一个构建工具来编译TS文件并将结果导入index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->
    <!-- This may differ depending on your build configuration -->
    <script src="./path/to/my-element.js" type="module"></script>
  </head>
  <body>
    <my-element></my-element>
  </body>
</html>

您可以直接使用tsc或模块捆绑器，例如Webpack + ts-loader或Rollup + rollup-plugin-typescript2。这实际上取决于项目的复杂性和要求以及要支持的浏览器。

聚合物未将聚合物投放到纸幅组件中

1 个答案: