Полимер не загружает веб-компонент полимером - PullRequest
Новая
       18

Полимер не загружает веб-компонент полимером

1 голос
/ 28 мая 2019

Следуя инструкциям LitElement здесь: https://lit -element.polymer-project.org / guide / start

Я буквально слежу за этим по книгам, а затем бегу polymer serve в корневой директории проекта.

Я даже копировал / вставлял каждый файл со страниц их примеров со стеком. Разве я не должен использовать полимерную порцию или что-то в этом роде?

Все, что я получаю, это пустая страница, и кажется, что она не распознает пользовательский элемент

Nothing created under my-element

мой-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.ts: 

import './my-element.ts';

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>

package.json: 

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

1 Ответ

1 голос
/ 29 мая 2019

Я даже копирую / вставляю каждый файл из их примеров страниц Stabblitz

На самом деле проекты 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 .Это действительно зависит от сложности и требований ваших проектов и от того, какие браузеры вы хотите поддерживать.

...