从 polymer 3 中单独的 html 文件导入模板

Question

而不是 return "HTML CONTENT"; 我有一个单独的 html 文件，我想将它导入我的 js 文件以 return 它的内容但 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 对我有用。

从 polymer 3 中单独的 html 文件导入模板

Import template from separate html file in polymer 3

html

javascript

polymer

es6-modules

polymer-3.x