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模块导出默认值将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，对我有用。

从聚合物3中的单独html文件导入模板

3 个答案: