这是未掺杂的第145篇文章。如果您想获得更多原始的好文章，请搜索公共帐户以关注我们?本文首先在郑凯恩（Zheng Caiyun）的前端博客上发表：Web组件 - 内容实践实践
当Google在2011年正式提出Web组件组件的概念时，它主要依靠三种技术：自定义元素，Shadow dom，html模板。直到2015年，Google才真正投入生产。当时，其他浏览器制造商没有大规模支持此功能，并且有很多兼容性问题需要应用。
在此期间，Angular，React和Vue的三个主要框架已经上升，并且它们都具有“组件化”的功能，它们也形成了各自的生态系统，但它们与框架密切相关。出于这个原因，开发人员，开发人员始终增加了网络组件的声音。
直到今天，由于主要的浏览器制造商的支持和结合了多填充物，使用Web组件时，兼容性不再是问题，开发人员已经开始积极探索和练习Web组件技术。
如何更好地应用Web组件技术？是否有一个可以简化更复杂写作的轻框架？然后让我们看一下Litelement所做的事情，我们可以使Web组件更好。
基于上一篇文章基于Web组件包装UI组件库的方式，我们有本机Web组件的一些内容，包括：
但是，有一些使用Web组件的本机写作的地方不令人满意：
为了拥有更丰富的发展方案和更好的发展经验，Litelement总结了上述问题，即：
它使用两个核心库来解决此问题，即点亮元素和lit-html。
LIT的核心是一个组件基类，它提供响应，范围样式和小型，快速和表达的语句模板系统，并支持打字稿类型声明。在开发过程中不需要编译或构造LIT，并且可以几乎没有工具。
我们知道HTMElement是一个内置的浏览器，而Litelement Base类是HTMEMEMER的子类，因此LIT组件继承了所有标准的HTMEMEMER属性和方法。更具体地说，更具体地说，Litelement从ReactiveElement继承，该响应属性具有响应属性，而后者则是后者的。从htmlelement继承。
创建点亮的组件也涉及许多概念，我们一一了解它们。
LIT组件将作为自定义元素实现，并在浏览器中注册。
本机写作方法主要是为了继承HTMLELEMENT类并重写它。Litelement框架基于HTMlelement类。Litlement类被封装。包装的某些语法糖已经变得更加简单，从而大大简化了这些代码。开发人员只需要继承Litelement类即可开发自己的组件，然后通过浏览器的本机方法Customlements.define进行注册。
定义了点亮的组件时，会定义自定义的HTML元素。因此，可以像任何构建的元素一样使用新元素。
该组件具有渲染方法，该方法被称为渲染组件的内容。
尽管点亮的模板看起来像字符串插值，但点亮分析并创建静态HTML，然后仅更新表达式中需要更改的值。
通常，组件的渲染方法返回单个Templateresult对象（与HTML标记函数返回的类型相同）。
Templateresult对象：它是由LIT-HTML接收模板字符串以及通过其HTML标签函数获得的纯值对象。
但是，它可以返回任何点燃的内容，包括：
DOM中的属性和属性之间的区别：
LIT组件接收标签属性属性，并将其状态存储为javaScript的类字段属性或JavaScript属性。Response属性可以触发响应更新周期，重新填充组件以及可选的读取或重写或重新编写变化期间的属性。属性可以配置其选项对象。
其选项对象可以具有以下属性：
选项对象或指定空选项对象等效于所有选项的默认值。
此外，LIT为每个响应属性生成一个getter/setter对。当响应属性更改时，将更新组件。Lit还自动使用超级类语句的属性选项。除非您需要更改选项，否则属性，属性不需要。
组件模板被渲染到其阴影根上。添加到组件的样式将自动作用于阴影根，并且只会影响组件阴影根中的元素。
Shadow dom为样式提供了功能强大的软件包。如果LIT不使用Shadow dom，则必须非常小心，不要意外地为组件外部的元素设置样式，无论是组件的父组件还是亚限体的父组件。涉及编写冗长而乏味的类别名称。通过使用Shadow dom，LIT可确保任何选择设备仅针对LIT组件的阴影根中的元素编写。
您可以使用标签模板CSS函数来定义静态样式类字段中的范围样式。
如图所示，还采用了点亮键样式，但该样式仅在Shodow Root中发挥作用。
静态样式类的价值可以是：
此外，样式还支持诸如使用表达式，使用语句，继承父样式，共享样式，使用Unicode Escapes以及在模板模板中使用样式的功能。LIT还提供两个说明，ClassMap和StyleMap，可以轻松地应用类和样式在HTML模板中。
点亮的组件可以继承本机自定义元素生命周期方法。成分。
标准自定义组件生命周期
除了标准的自定义元素生命周期外，点亮组件还实现了响应更新周期。lit是异步执行更新，因此属性更改为批处理。如果在请求更新之前发生了更多属性更改，但在更新开始之前，将在同一更新中执行所有更改。响应prpperties属性更改或应用requestupdate（）方法时，将触发响应更新周期，它将触发，它将更改为DOM。
响应更新周期
第一阶段：触发更新
第二阶段：执行更新
第三阶段：完整更新
其他：
整个流量图标如下：
了解基本概念和内容。如果您完成了任何现代的，基于组件的网络开发，则应该认为Lit的一系列概念和用法是已知且易于入门的。LET在某些情况下了解Litelemt的其他特征。
对于复杂数据的处理，为什么存在这样的问题？根本原因是因为属性标签的属性值只能是字符串类型，而其他类型需要序列化。在litelement，您只需要在父组件模板的属性值之前使用（。）运算符，因此，组件内部的内部提出可以正确地序列化到目标类型中。
这可以支持各种数据的传输和使用。
在这里，子组件接收父组件的值属性。设置默认值。值值通过子组件中的监视输入事件进行更新，因为该值属性是用反射图配置的。
如图所示：输入组件的默认值为和输入后，组件的标签属性值同时更改。
目前，您可以通过获取父组件的属性来获得可亚堵塞的修改的值。要实现数据的两个 - 道路绑定，但是litelement本身是一个 - 道路数据流。
该指令可以通过自定义表达式显示来扩展LIT函数。lit包含许多构建的指令，以帮助满足各种渲染需求：以组件缓存为例。
丢弃DOM时更改模板而不是DOM。当大型模板之间经常切换时，您可以使用此指令来优化渲染性能。
本示例使用模板中的语句表达式，然后在单击事件中切换组件时显示不同的模板内容；引入缓存指令功能以实现DOM的缓存。
Litelemt具有可以使用的大量指令功能。
此外，它还具有丰富的内容，例如Mixins和decotrs，这是值得学习的，并且不再做得太多。
通常，Litelemt在Web组件的开发中具有许多本地优势。它具有以下特征：
结合这些要点，项目开发中的大多数场景基本上都可以满足。
以上是引入Litelemt的主要内容。有关更多内容，您可以访问官方网站学习。本文中的案例地址可以在此处获得。同时，建议安装Lit-Plugin VS代码插件以更好地预览和更改代码。
我们知道W3C模仿JQuery的$函数，意识到使用该方法的方法，并逐渐替换了JQuery的功能快速选择DOM元素，加速了jQuery的下降，并带有前端的新阶段。Web组件的持续开发，它会替代现有的前端框架吗？
在此阶段，这是不可能的，因为Web组件与前端框架之间的关系是“共存”的，而不是相互排斥，两者可以完全互相补充。是一个非常重要的功能，它们还具有页面路由，数据绑定，模块化，CSS Pre -Precessor，Virtual Dom，diff算法和各种巨大的生态函数。Web组件仅求解这样的功能。VUE，从他们有关Web组件的官方文档中，我们可以更好地帮助我们了解它们与Web组件的关系。
模块联合分析
性能优化 - 图片压缩，加载和格式选择
如何基于WebComponents打包UI组件库
网络工作者
如何降落智能机器人
开源地址www.zoo.team/openweekly/
开源地址https://github.com/zcy-inc/skupathfinder-back/
Zooteam是一个年轻的热情和创造性的前端团队，属于Zhengcaiyun的产品研究与发展部的研发部，基地位于风景如画的杭州。该团队目前拥有60多个前端合作伙伴，平均年龄是平均年龄的。在27％的27％中，有27％是一名全面的工程师，是一个适当的青年风暴组。会员既构成来自阿里和Netease的“老”士兵，以及吉江大学，中央科学技术大学，杭州等的新鲜人大学。除了日常业务对接外，团队还在材料系统，工程平台，建筑平台，绩效经验，云应用程序，数据分析和可视化，促进和降落一系列内部技术的方向上进行技术探索和实际战斗产品，并连续发展前端技术系统的新边界。
如果您想更改此事，您想开始折腾；如果您想更改警告，则需要有更多的想法，但是您不能打破游戏。如果您想更改，您有能力取得结果，但您不需要您；如果您不需要您；如果您不需要您；如果您想改变自己想做的事情，则需要一个团队来支持它，但是没有地方可以带人。如果您想改变既定的节奏，那将是“工作时间5年和3年的工作经验”；如果您想更改原始内容是很好的启蒙，但是总会有那一层窗纸的模糊……如果您相信相信的力量，请相信普通人可以实现非凡的事物，并相信您可以遇到一个更好的自我。如果您想参加开展业务的过程，促进具有深度业务理解，全面的技术系统，技术创造价值和有影响力的前端团队的前端团队的成长，我认为我们应该说话。任何时候，等待您写东西，将其发送给
YW：https：//juejin.cn/post/7104055306396631076