这是不与水混合的第142篇文章。如果您想获得更多原始的好文章，请搜索以关注我们的公共帐户?本文首先在郑凯恩的前端博客上发表：如何基于Web Components打包UI组件库
作为对城市狮子的前端攻击，我相信每个人也都在关注前端的一些新技术。近年来，前端组件的开发已变得正常。重复使用的目的降低了我们的维护成本并提高了开发效率。但是，有一个不利条件不能与框架本身分开，因为我们的浏览器本身无法分析。这些组件。因此，是否有可以实现此效果的技术？答案是当今的主角网络组件。
Web组件是一组不同的技术，可让您创建可重复使用的自定义元素（它们的功能已封装在您的代码之外），并在您的Web应用程序中使用它们。目前，W3C也被积极促进，并且浏览器的支持不是Bad.Firefox，Chrome和Opera都支持了Safari，也支持其中的大多数。Edge还被WebKit内核所取代，该内核不应远离综合支持。当然，社区还具有兼容的解决方案Web Components/Polyfills。
首先，我们从最简单的按钮组件开始。我们可以通过传递组件中的类型来更改按钮的样式，并动态监视数据中的更改。
在此示例中，我们将两个标签的内容与插槽使用。如果我们不想使用标签的内容来传递标签怎么办？
我们可以通过InnerHTML获得自定义组件之间的内容，然后将此内容插入相应的节点。
在理解上面的这些基本概念之后，我们可以开发一些简单的组件，但是如果我们想传递一些复杂的数据类型（对象，数组等），该怎么办？我们只能传递字符串？答案是肯定的！
使用上面的按钮，我们不仅必须更改状态，而且还要传递某些配置。我们可以通过JSON字符串
尽管这种方法是可行的，但不是很优雅。
因此，我们需要改变这个想法。我们上面使用的方式是属性的值。数据类型只能是字符串。我们可以使用它来传递该值吗？答案肯定还可以。属性阴影，我们的JS中也有属性。它指的是DOM属性，即JS对象，并支持复杂的数据类型。
尽管此方法解决了上述问题，但它导致了一个新的问题 - 无法监视自定义组件中此属性的更改。我们现在该怎么办？也许从一开始，我们的想法是错误的。显然，数据的响应变化是我们的本机JS所没有的能力。根据方法，我们需要进行更改。我们不应过多地依靠属性的配置来实现某种效果，因此转换方法如下。
我们本地返回属于HTML的能力，但不使用配置来解决此问题，但这也确定了我们的组件不支持过于复杂的功能。
上面提到了数据的一条路绑定，并且组件状态页面将随之更新，那么我们如何实现两个绑定？
接下来，我们封装一个输入以实现两条绑定。
步骤1：要拥有一个优雅的集体价格库，我们必须首先设计优雅的目录结构设计目录结构。
我们的组件是独立包装的。由于在我们的组件库中引入了组件，因此我们必须将每个组件封装到单独的文件中。
在我们的按钮/index.js中写入如下：
将组件打包到单独的JS文件
支持主题颜色可以配置。我们只需要将颜色写入变量，转换如下：
这样，我们可以在全球情况下修改主题颜色。
在最近的VUE3中，VUE对WebComponents有更好的支持。VUE在“无处不在”测试的自定义元素中得分100％。但是我们仍然需要进行以下配置：
VUE本身的自定义元素的样式与组件分析的VUE组件相似，该分析使VUE分析并注册自定义（非本地HTML标签）标签为Vue Component.define组件。警告控制台，因此我们需要在构造工具中跳过此分析：
组件的特定用法类似于VUE 2X。
Web组件触发的事件可能无法通过React正确传输。您需要在React组件中手动添加事件处理器来处理这些事件。在使用React时，我们需要注意，Web Components组件我们需要使用类，而是使用类别。添加课时的className
阅读本文后，我们绝对想到了为什么WebComponents实施了多个框架的许多代码，但它们尚未占据市场库？我总结了一些分数：
网络工作者
如何降落智能机器人
练习2年零8个月的练习的前端学员
Snabbdom中的VNODE和DIFF算法
如何使用SCSS实现一个单击的皮肤交换
开源地址www.zoo.team/openweekly/
开源地址https://github.com/zcy-inc/skupathfinder-back/
Zooteam是一个年轻的热情和创造性的前端团队，属于Zhengcaiyun的产品研究与发展部的研发部，基地位于风景如画的杭州。该团队目前拥有60多个前端合作伙伴，平均年龄是平均年龄的。在27％的27％中，有27％是一名全面的工程师，是一个适当的青年风暴组。会员既构成来自阿里和Netease的“老”士兵，以及吉江大学，中央科学技术大学，杭州等的新鲜人大学。除了日常业务对接外，团队还在材料系统，工程平台，建筑平台，绩效经验，云应用程序，数据分析和可视化，促进和降落一系列内部技术的方向上进行技术探索和实际战斗产品，并连续发展前端技术系统的新边界。
如果您想更改此事，您想开始折腾；如果您想更改警告，则需要有更多的想法，但是您不能打破游戏。如果您想更改，您有能力取得结果，但您不需要您；如果您不需要您；如果您不需要您；如果您想改变自己想做的事情，则需要一个团队来支持它，但是没有地方可以带人。如果您想改变既定的节奏，那将是“工作时间5年和3年的工作经验”；如果您想更改原始内容是很好的启蒙，但是总会有那一层窗纸的模糊……如果您相信相信的力量，请相信普通人可以实现非凡的事物，并相信您可以遇到一个更好的自我。如果您想参加开展业务的过程，促进具有深度业务理解，全面的技术系统，技术创造价值和有影响力的前端团队的前端团队的成长，我认为我们应该说话。任何时候，等待您写东西，将其发送给
原始：https：//juejin.cn/post/70962656330466670606