Javascript 聚合物未使用聚合物服务器加载ts腹板组件_Javascript_Typescript_Polymer_Web Component_Lit Element

Javascript 聚合物未使用聚合物服务器加载ts腹板组件

javascript typescript polymer

Javascript 聚合物未使用聚合物服务器加载ts腹板组件,javascript,typescript,polymer,web-component,lit-element,Javascript,Typescript,Polymer,Web Component,Lit Element,以下是LitElement指南：我只是照本宣科，然后跑步 polymer service位于项目的根目录中我甚至复制/粘贴了他们示例stackblitz页面中的每个文件。难道我不应该使用聚合物或其他东西吗我得到的只是一个空白页面，它似乎无法识别customElement my-element.ts： import { LitElement, html, customElement, property } from 'lit-element'; @customElement('my-el

以下是LitElement指南：

我只是照本宣科，然后跑步

polymer service

位于项目的根目录中

我甚至复制/粘贴了他们示例stackblitz页面中的每个文件。难道我不应该使用聚合物或其他东西吗

我得到的只是一个空白页面，它似乎无法识别customElement

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

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>

我甚至复制/粘贴了他们示例stackblitz页面中的每个文件

实际上，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>

您可以直接使用或使用模块绑定器，如或。这实际上取决于您的项目的复杂性和要求以及您希望支持的浏览器。

啊，好吧，这是我最大的困惑，因为他们在没有脚本标记的情况下是如何做到的。拒绝从“”执行脚本的，因为它的MIME类型（'video/mp2t'）不可执行。所以我猜它不喜欢我给它一个类型脚本文件。我正在做src=“/my element.ts”。我是否需要设置一个完整的构建/包配置来使用ts？是的，浏览器不理解

.ts

文件：您必须将它们编译为js。我更新了答案，在编译器/绑定器上添加了一点上下文。如果需要更多信息，请告诉我

{
  "name": "my-app",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {
    "@webcomponents/webcomponentsjs": "^2.2.10",
    "lit-element": "^2.1.0"
  }
}

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