從聚合物3中的單獨的html文件導入模板

Question

而不是return "HTML CONTENT"; 我有一個單獨的html文件，我想將其導入到我的js文件中以返回其內容，但從import template from '/m-chip.html";不起作用。

element.js

import {Element as PolymerElement} from '../node_modules/@polymer/polymer/polymer-element.js';
import template from '/m-chip.html';
export class Mchip extends PolymerElement{
    static get template() {
        return template;
    } 
    constructor() {
        super();
    }
} 
customElements.define("m-chip" ,Mchip)

m-chip.html

<style>
...
</style>

<div>...</div>

沒有jquery和普通js怎么實現？

Answer 1

現在，導入html文件還不是javascript可以理解的。 但是，您可以使用webpack來構建項目，並添加html-loader https://github.com/webpack-contrib/html-loader ，以指定如何在javascript中處理html導入。

Answer 2

實際上對於不需要參考調整的html，我通過js模塊export default將html代碼作為字符串導出：

// exports a constant 
export default `
  <style>
    ...
  </style>
  <div>
    ...
  </div> `

在聚合物元素中，我導入ES6模塊，例如：

import template from '../templates/template.js'
...
static get template() {
  return template;
}

這不是最好的解決方案，但目前使用Polymer3進行一些測試，並確定模板結構還不錯！

Answer 3

嘗試

import { PolymerElement, html } from '@polymer/polymer';
import template from '/m-chip.html';

...

static get template() { 
    return html([template]);
}

以及模板html文件中的純html，對我有用。