十分钟让你入门WebComponents

什么是webcomponents组件封装是我们前端一直在讨论的一个话题。但是现在我们的组件库更多是基于某个框架来实现的，比如Vue的ElementUI，React的ANTD。这种组件的缺点是对外部框架的依赖。您必须基于Vue或React使用它。如果哪天项目迁移了，你得重写一套。能不能基于原生的HTML/CSS/JS来封装一个组件规范？那就是Web组件。WebComponents本身不是一个单独的规范，而是一组DOMAPI和HTML规范，用于创建可直接在您的Web应用程序中使用的具有自定义名称的可重用HTML标签。组件定义和核心目标我认为组件是一种内部抽象，封装了一定的逻辑功能，并将相关接口暴露给外部调用。它可以完成以下功能：Reuse：组件将作为一个可重用的单元在多个地方使用。解耦：组件本身隔离变更，组件开发人员和业务开发人员可以按照组件的约定独立开发和测试。封装：组件屏蔽了内部细节，组件的使用者只关心组件的属性、事件和方法。抽象：组件通过属性、事件、方法等基础设施提供了一种统一的描述UI的模式，降低了用户学习的心理成本。那么WebComponents是如何做到以上几点的呢？WebComponents的核心概念主要有以下几点：自定义元素（customelements）：一组JavaScriptAPI，允许您定义自定义元素及其行为，然后在您的用户界面中根据需要使用它们。ShadowDOM：一组JavaScriptAPI，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制它们的相关功能。这样，您可以将元素的功能保密，这样就可以编写脚本和设置样式，而不必担心与文档的其余部分发生冲突。HTML模板：这里要注意几点：template可以理解为一个普通的div，但该元素中的所有内容都不会直接显示在界面上。style标签可以直接插入template标签中，style在模板内部定义。:host伪类用于定义shadow-root的样式，即包裹这个模板的标签的样式。注意占位符。稍后可以使用您自己的标记语言填充此占位符，我们将在后面提到。它的用法和Vue的slot一样。应该说是Vue借鉴了它的实现。自定义元素使用CustomElementRegistry.define()方法注册您的新自定义元素，将要定义的元素的名称、指定元素功能的类以及它继承自的元素（可选）传递给它。自定义元素的名称，一个DOMString标准字符串，为了防止与自定义元素冲突，必须是带连字符的名称（如custom-tag）。这也是推荐的使用Vue自定义组件命名的方式。构造函数。包含组件生命周期定义的自定义元素构造函数。扩展参数（可选），参数类型为对象，需要包含extends属性，用于指定创建的元素继承自哪个内置元素（如{extends:'p'}）。代码如下：classUserCardextendsHTMLElement{constructor(){//必须调用super();极好的（）;//创建一个影子节点，其他创建的元素应该附加到这个节点上varshadow=this.attachShadow({mode:"closed"});//获取模板实例vartemplateElem=document.getElementById("userCardTemplate");//复制一下，因为页面上的模板不是一次性的，其他组件也可以参考varcontent=templateElem.content.cloneNode(true);//this.getAttribute可以获取组件的参数内容.querySelector("img").setAttribute("src",this.getAttribute("image"));//添加Go到shadowdomshadow.appendChild(content);}}//注册自定义元素window.customElements.define("user-card",UserCard);这里需要注意一点：Class类必须调用super()。获取到模板后，需要通过clone()方法进行复制，因为页面上的模板不是一次性的，还可能引用其他组件。this.getAttribute可以获取传递给组件的参数。定义完成后，我们可以直接使用user-card自定义元素，并且可以给组件传递属性，可以通过slot标签指定name属性，使用我们在上面HTML模板中定义的占位符。Gopal