Невозможно отобразить веб-компонент - PullRequest
Новая
       15

Невозможно отобразить веб-компонент

0 голосов
/ 23 марта 2020

Я не могу отобразить свой веб-компонент. Я создал класс HelloWC.ts, который имеет единственную задачу (render Hello внутри тега <h2>). Я использовал tsconfig.json, чтобы определить, как создать каталог / dist , содержащий класс HelloWC, переведенный в es6 . В файле index.html я добавил тег <script> (в конце <body>), в который я импортировал свой компонент HelloWC из каталога / dist . Затем я хотел отрендерить мой <hello-wc> компонент внутри тега index.html <body>. Если я проверяю мой index.html, обслуживаемый server-http, я вижу, что есть тег <hello-wc></hello-wc>, но он пуст. В сетевой карте я также вижу, что HelloW C. js была успешно загружена. Я также добавил простой console.log() в конструктор моего компонента, но сообщение никогда не регистрируется (похоже, что мой компонент никогда не создается). Я понятия не имею, почему мой компонент не может правильно отображаться. Если у вас есть идеи, дайте мне знать.

HelloW C .ts 

const template: string = `<div>
    <h2>Hello</h2>
</div>`;

export class HelloWC extends HTMLElement {
    shadowRoot!: ShadowRoot;

    public static TAG = 'hello-wc';

    constructor() {
        super();
        console.log('heelo wc');
        this.attachShadow({ mode: 'open'});
        this.shadowRoot.innerHTML = template;

    }
}
customElements.define(HelloWC.TAG, HelloWC);

index. html

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <title>Hello WC</title>
    </head>
    <body>
        <hello-wc></hello-wc>
        <script src="/dist/HelloWC.js" type="module"></script>
    </body>
</html>

tsconfig. json

{
  "compilerOptions": {
    "module": "umd",
    "target": "es6",
    "sourceMap": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "removeComments": true,
    "moduleResolution": "node"
  },
  "exclude": [
    "src",
    "node_modules",
    "dist"
  ]
}

Структура проекта

enter image description here

1 Ответ

1 голос
/ 24 марта 2020

Похоже, что вы импортируете скомпилированный файл как модуль ES, однако, tsconfig.json вы указали "module": "umd" (это должно быть es6 или esnext, а не umd, если вы хотите модули ES)

...