学会了它 才让我体验到最真实的Web元件化思维
介绍
LitElement是一个简单的基类，用于建立快速，轻量级的Web元件，可以在任何带有任何框架的Web页面中使用。LitElement使用lit-html渲染到shadow DOM，并新增API来管理属性和特性。预设情况下会监测属性的变化，并且元素（Element）在其属性更改时会异步更新。
什么是lit-html？
lit-html是一个简单，现代，安全，小巧，快速的适用于JavaScriptHTML的模板库，允许你在JavaScript中使用带有嵌入式JavaScript表示式的字串模板编写HTML模板。在背后lit-html从JavaScript模板中建立HTML 元素（Element）并对其进行处理，以便它确切地知道表示式插入和更新值的位置。官网https://lit-element.polymer-project.org/
Github地址https://github.com/polymer/lit-html
安装npm install lit-html
使用import {html, render} from 'lit-html';
// lit-html 模板函式，返回一个lit-html 模板.
const helloTemplate = (name) => html`Hello ${name}!`;
//渲染Hello Steve!到DOM中
render(helloTemplate('Steve'), document.body);
// 更新 Hello Kevin!, 仅更新 ${name} 部分
render(helloTemplate('Kevin'), document.body);
lit-html提供两个主要的出口：html：用于生成TemplateResult的JavaScript模板标记，TemplateResult是模板的容器，以及应填充模板的值。
render()：一个将TemplateResult呈现给DOM容器的函式，例如元素或shadow root。
LitElement
LitElement可以轻松定义Web元件 , 非常适合在整个组织中共享元素或构建UI设计系统。在您使用HTML的任何地方使用您的元件：在主document、CMS、Markdown以及React、Vue等框架中。使用Typescript编写
使用Javascript编写
在html中使用和原生的一样，或者说你就当成是原生的一样使用
快速搭建开发环境
全域性安装polymer-clinpm install -g polymer-clipackage.json档案{
"name": "ele",
"version": "0.0.0",
"private": true,
"dependencies": {
"lit-element": "2.2.0",
"@webcomponents/webcomponentsjs": "2.2.10"
}
}
webcomponents为了相容IE和Edge浏览器，我本地是IE11版本，已经测试通过。
在你的专案资料夹安装以上依赖npm install
//或者
yarn
my-element.js内容
index.html内容
启动起来polymer serve
不出意外的话，开启Google浏览器、火狐浏览器以及IE浏览器测试
Chrome浏览器：
FireFox浏览器：
IE11浏览器：
完整专案开发搭建，官网提供了一个例项，可以再其基础上进行开发git clone https://github.com/PolymerLabs/lit-element-build-rollup.git
cd lit-element-build-rollup
npm install
npm run build
npm run start
为什么使用LitElement？
优雅的宣告式用法LitElement其简单，熟悉的开发模型使构建Web元件变得前所未有的简单。以宣告方式表达您的UI，作为状态的函式。无需学习自定义模板语言，你可以在模板中使用JavaScript的全部功能。元素更改时会自动更新。
快且轻量级LitElement使用lit-html定义和呈现HTML模板。DOM更新速度非常快，因为lit-html只会重新呈现UI的动态部分，无需进行差异化。
无缝互操作性LitElement遵循Web元件标准，因此你的元件将适用于任何框架。LitElement使用自定义元素轻松包含在网页中，使用Shadow DOM进行封装。在Web平台上没有像其它框架一样进行新的抽象。
浏览器相容性
LitElement适用于所有主流浏览器，包括Chrome、Firefox,、IE、Edge、Safari以及Opera。
总结
LitElement这样的元件化技术，能让我们高效的编写自己的可复用Web元件，与React、Vue等框架不能，它可以说是最接近原生的，只不过一个是手动封装的，一个是浏览器自带的，而且自己编写的也能够用在其它框架像原生html元素一样使用，带来了良好的程式设计体验且体会到了优雅的Web元件化程式设计思维，一切似乎都变得简单了起来！
