Импорт содержимого CSS и HTML в Typescript для веб-компонента

У меня есть веб-компонент, и я могу использовать его в своем файле main.ts, который является точкой входа в мое приложение.

main.ts :

import './Components/List/ListComponent'

console.log("Main");

ListComponent.ts

export class ListComponent extends HTMLElement {
...
customElements.define("my-list", ListComponent );

Я могу разделить свой код на модули TS. Следующим шагом, который я пытаюсь выполнить, является загрузка содержимого HTML и CSS для веб-компонента. Похоже на то, как это делает Angular, но с ванильными веб-компонентами. Моя цель - определить содержимое HTML веб-компонента в файле HTML и стиль CSS для компонента в файле CSS.

В учебнике, которому я следовал, используется веб-пакет, и я хочу использовать его только для разрешения моего импорта (я хочу, чтобы мой код TS был совместим с любым упаковщиком)

Я видел, что могу импортировать файлы CSS через import "./css/main.css";, но, похоже, он работает только с MiniCssExtractPlugin для веб-пакета. Также при этом стили являются глобальными, а не локальными для веб-компонента. Могу ли я импортировать HTML-файлы аналогичным образом?

Есть ли «ванильный» способ TS для импорта файлов CSS и HTML? Если возможно, я хочу быть независимым от любого фреймворка и загрузчика модулей. Я знаю, что моя структура похожа на Angular, но мне нужна только функциональность baisc.


webpack typescript web-component native-web-component
person J. Doe    schedule 18.05.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Есть несколько способов сделать это. Существуют плагины babel для встраивания произвольных файлов в виде строк, или вы можете создать файл html.d.ts со следующим содержимым:

declare module '*.html' {
  const value: string;
  export default value
}

Затем вы можете сделать что-то вроде import html from '. /template.html' из своего MyList.ts

person Martin    schedule 18.05.2020
comment
С кодом, который вы предоставили, мне нужен html-плагин webpack или? - person J. Doe; 19.05.2020
comment
Я написал статью на Medium — с одним из возможных решений roshan-khandelwal.medium.com/ веб-компоненты-c7aef23fe478 - person Roshan Khandelwal; 02.11.2020

arrow_upward
-4
arrow_downward

Вам нужно изучить JSX. В реагирующих приложениях шаблонная часть выполняется с использованием JSX. Он довольно прост и легок в освоении и использовании. Кроме того, вы сможете импортировать, например, ListComponent, только если вы экспортировали его по умолчанию, иначе используйте {}.

import ListComponent from './Components/List/ListComponent'

person SAURABH    schedule 18.05.2020
comment
Это факт. Но, думаю, это уже не будет ванильным проектом... - person Gilson Cavalcanti; 18.05.2020
comment
Также будет сложно портировать на angular? - person J. Doe; 18.05.2020