html 使用ES6和lit-html导入和标记模板

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用ES6和lit-html导入和标记模板相关的知识，希望对你有一定的参考价值。

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'src'),
    filename: 'bundle.js'
  }
};

import {html} from 'lit-html';

export function templateOne() {
  return html`I'm the default template<br>I say that ${this.getAttribute('tagline')}`;
}

export function templateTwo() {
  return html`I appear when you click that button`;
}

{
  "name": "vanilla-lit",
  "version": "0.0.0",
  "description": "Almost-Vanilla custom element with lit-html and importing templates",
  "main": "index.js",
  "author": "tpluscode",
  "scripts": {
    "start": "http-server",
    "build": "webpack --optimize-minimize",
    "dev": "webpack -w"
  },
  "license": "MIT",
  "dependencies": {
    "@polymer/polymer": "next",
    "lit-html": "0.6.0"
  },
  "devDependencies": {
    "http-server": "^0.10.0",
    "webpack": "3.5.5"
  }
}

import {html} from 'lit-html';
import {render} from 'lit-html/lib/lit-extended';
import {PropertyAccessors} from '@polymer/polymer/lib/mixins/property-accessors';
import * as templateFactory from './template-factory';

export default class VanillaLitComponent extends PropertyAccessors(HTMLElement) {

  constructor() {
    super();

    this._template = templateFactory.templateOne;
  }

  static get observedAttributes() {
    return [
      'tagline',
      '_template'
    ];
  }

  connectedCallback() {
    this._enableProperties();
  }

  _propertiesChanged() {
    render(
      html`${this._template.call(this)}
      <br>
      <button on-click=${this.__switchTemplate}>Click me!</button>`,
      this);
  }
  
  __switchTemplate() {
    this._template = templateFactory.templateTwo
  }

}

VanillaLitComponent.createPropertiesForAttributes();

window.customElements.define('vanilla-lit', VanillaLitComponent);
<!DOCTYPE html>
<html lang="en">
<body>
  <vanilla-lit tagline="Luke"></vanilla-lit>
  <script src="bundle.js"></script>
</body>
</html>

以上是关于html 使用ES6和lit-html导入和标记模板的主要内容，如果未能解决你的问题，请参考以下文章

ES6 模块，啥算作第一次导入？

html ES6 - 使用标记的模板字符串进行清理

如何使用 React + ES6 + webpack 导入和导出组件？

通过 CoffeeScript 和 Browserify 使用 ES6 导入

使用 webpack、ES6、ReactJS 导入 JavaScript 文件和调用函数

使用 ES6 语法和绝对路径导入外部模块