Web Components开发1、自定义元素和未知元素1.1、不同之处1.2、自定义元素1.3、自定义元素分类2、详细了解template元素3、深入介绍slot元素3.1、了解Shadow DOM3.2、slot元素的匹配细节3.2.1、name属性值唯一3.2.2、slot属性值可以不唯一3.2.3、同一个组件可以使用多个插槽3.2.4、必须是组件的子元素3.3、slot元素中的事件3.4、特殊的display计算值与样式设置4、了解part属性和exportparts属性4.1、更常用的part属性4.2、嵌套组件解决方案exportparts属性5、后起之秀is属性原生Web Components组件是组件开发的王道实现首先浏览器原生支持性能高其次原生语言、跨框架Vue和React等项目均适用最后浏览器已支持多年社区实践丰富无须担心兼容性问题和维护成本。虽然Web Components开发的主力是JavaScript但是HTML也起到了至关重要的作用。1、自定义元素和未知元素在HTML中元素共分为三类原生元素、自定义元素和未知元素。其中原生元素指前文提到的div、span等诸多元素自定义元素稍后介绍这里讲一下未知元素。未知元素有专门的Web API接口名称名为HTMLUnknownElement。在网页中随便写一个标签例如这里的username就是一个HTMLUnknownElement元素。简单测试如下在HTML规范中HTMLUnknownElement元素是一个被认可的合法元素CSS可以无障碍使用例如此时显示的文字效果是ZHANGXINXU。由于HTMLUnknownElement继承了HTMLElement中的方法因此基本上常用的HTML方法它都是可以畅快使用的。例如想将文字变红色可以直接设置1.1、不同之处HTMLUnknownElement和HTMLDivElement、HTMLSpanElement等类型是平级的都是HTMLElement的子集区别在于原生HTML元素自带若干特殊的属性或者方法。例如表单元素HTMLFormElement有reset()方法、novalidate属性而HTMLUnknownElement没有携带任何属性和方法。这其实是一件好事我们就可以为HTMLUnknownElement扩展非常私有的方法而不用担心会影响其他元素。例如默认所有HTMLUnknownElement元素的display计算值都是inline我们可以扩展block()方法使其块状化。此时执行document.querySelector(‘username’).block()就可以让username元素块状化了。1.2、自定义元素如果我们自定义元素的标签名使用短横线分隔那么这个元素就不再是未知元素。例如在浏览器中的运行结果如图所示。不过标签是短横线连接的元素也不是真正的自定义元素需要注册才行例如此时user-name元素就是一个自定义元素了可以使用document.createElement(‘user-name’)创建也可以直接在HTML中使用例如1.3、自定义元素分类自定义元素分为两种一种是自主自定义元素比如前面讲的user-name元素另一种是内置自定义元素是基于标准HTML元素拓展而来的使用HTML is属性进行标识。例如给ul元素进行某种自定义扩展此时只需要给ul元素设置is“expanding-list”就可以让该元素变成内置自定义元素。Web Components开发其实都是围绕上述两种自定义元素来展开的当然深入到具体细节还有很多其他的知识下面开始一一介绍。2、详细了解template元素先来了解一下template元素顾名思义就是存储HTML模板的元素。纵观Web发展史HTML模板总共有四种类型包括随着IE浏览器退出历史舞台template元素可以说是目前HTML模板唯一的选择因为其具有以下一些优势。其一天然隐藏。也就是template元素的计算值默认就是none无须对HTML元素进行额外的设置。其二位置任意。类似script或者style标签可以设置在head中也可以设置在body或者frameset中。其三非字符串类型。虽然template元素的内容可以采用字符串的方式获取例如但本质上template元素里面的HTML内容还是HTML节点是可以通过特定的JavaScript API获取的。例如访问模板中的图片节点就可以这样设置注意只能使用template.content.querySelector去获取模板内的DOM节点不能使用template.querySelector或者template.childNodes去获取因为template元素不同于普通的标签元素其拥有一个独立的document文档这个特性多少有点类似于iframe元素。例如输出的是一个DocumentFragment对象如图所示。因此我们也可以通过复制节点的方式提取所有的模板内容就像下面这样其四应用场景广泛。虽然template元素是Web Components开发中非常常用的HTML元素之一但并不意味着template元素只能用在Web Components开发中更多的是指Shadow DOM开发​。在组件之外只要想存储模板信息或者希望某些元素延时渲染都可以使用template元素Vue就是使用template元素存储渲染数据的。3、深入介绍slot元素slot元素也被称为插槽元素是Web Components开发中极为重要的HTML元素可以实现从外面传入HTML内容的功能。例如我们自定义一个名为zxx-alert的弹出框组件这个组件内置一个确认按钮但是弹出的内容却是不固定的需要从外面传入此时就需要用到slot属性和slot元素。其中slot属性用在组件元素中slot元素则必须位于组件的Shadow DOM元素中。3.1、了解Shadow DOMShadow DOM虽然名义上叫作“DOM”​实际上它创建了一个独立的文档树只是这个文档树隐藏在DOM元素中自成体系可以不受外部样式的影响。例如有如下所示的HTML代码此时我们将phost元素作为Shadow DOM根元素创建一个按钮元素如下所示此时页面中的按钮就变成下图所示的样子可以看到phost元素内创建的按钮并未受外面CSS样式的影响。如果此时打开开发者工具并且你已经选择了开启显示Shadow DOM则可以看到下图所示的HTML结构创建的按钮元素位于一个标记了shadow-root的结构中。这个shadow-root就可以被看成Shadow DOM的根而其所在的根元素可以使用CSShost伪类或者host()函数匹配。由于Shadow DOM中的CSS和JavaScript通常都不会影响外面的元素因此特别适合用于Web Components开发可以让组件的样式与功能不受外部环境影响。不过组件总是需要与外部环境通信的可能是内容也可能是属性还可能是样式无论是内容、属性还是样式都有对应的元素或属性支持。例如内容的交互通信使用slot元素。回到一开始提到的自定义提示框案例想要实现内容占位效果可以这么处理首先定义模板然后动态内容使用slot元素占位例如弹框提示内容和一个按钮元素。随后将此HTML模板写入组件元素的Shadow DOM中就像下面这样此时只要在页面中像普通元素那么使用自定义的zxx-alert元素代码如下所示就可以看到下图所示的弹出框效果了。也就是说只要设置了slot属性的元素就会自动替换组件Shadow DOM中name属性值和slot属性值一致的slot元素这就是slot元素的作用规则。3.2、slot元素的匹配细节插槽匹配规则很简单即slot插槽元素的name属性值和任意HTML元素的slot属性值一致的时候会被匹配不过其中有几个细节需要了解一下。3.2.1、name属性值唯一slot元素支持name属性可以看成身份标识需要是唯一的因为多个相同的name属性最多只会匹配一个插槽元素。例如其中namealert插槽元素就不会被HTML替换如图所示可以看到下面那个占位的slot元素的默认文字并未被替换。3.2.2、slot属性值可以不唯一slot属性值可以不唯一例如下面这段HTML代码此时会看到两段执行成功的提示如图所示截自Firefox浏览器​。3.2.3、同一个组件可以使用多个插槽同一个组件可以使用多个插槽例如预留一个按钮的位置此时可以看到不仅提示内容被插入弹框中取消按钮也一并被插入效果如图所示。3.2.4、必须是组件的子元素必须将用来匹配的元素写在自定义元素组件中作为子元素存在例如下面的配对元素在自定义元素之外是没有插槽效果的像下面这种情况匹配元素不是子元素而是子元素的子元素也是无法作为有效的插槽显示的效果如图所示可以看到并没有“取消”按钮。即使div元素设置了displaycontents也无效。3.3、slot元素中的事件以弹框中的“取消”按钮为例如何给“取消”按钮的插槽添加事件呢虽然视觉上匹配元素替换了插槽元素但实际上两者的位置并未发生变化其HTML结构关系如图所示。因此要实现点击弹框中的“取消”按钮来关闭弹框只需要在原始的slot元素或者匹配的button元素上写事件DOM层级关系依然按照原始的DOM关系处理就可以了。例如下面两种处理方式都可以关闭弹框1.匹配按钮元素添加事件2.在定义Web组件的时候处理只显示关键代码​眼见为实以上出现的案例效果均可以通过在浏览器中输入https://www.htmlapi.cn/10/1-1.html访问进行体验。3.4、特殊的display计算值与样式设置据我所知slot元素是唯一display默认值是contents的元素如图所示。displaycontents的作用就是其名字所表示的意思只有内容盒子取消其余所有盒子因此设置displaycontents的元素不能参与布局不能设置边框和背景色只能设置被动继承颜色和字号等具有继承特性的CSS属性。此display计算值在关键时候还是非常有用的比方说在标签嵌套过深并影响布局的时候。::slotted()函数与样式设置另外如果希望在Shadow DOM内部对元素进行样式设置则可以使用CSS::slotted()函数参数就是占位元素的选择器例如此时只要组件里面的占位元素是p元素那么出现的文字颜色就是红色加粗的如图所示。4、了解part属性和exportparts属性Shadow DOM树可以被看作一个封闭的小世界好处是里面的样式和交互不易受外部环境干扰实现的组件更加稳固但是总存在需要对组件内部样式自定义的情况就像原生的单选按钮、复选框元素、progress进度元素的样式自定义那样。为了解决这样的问题就设计了part属性和exportparts属性专门将Shadow DOM树里面的元素暴露在外面通过特殊的CSS选择器进行匹配从而实现样式的自定义。4.1、更常用的part属性先来说说part属性直接看案例还是以前面出现的zxx-alert元素为例。如果希望在业务代码中定义组件内dialog元素的样式就需要在dialog元素上使用part属性例如设置part“dialog”代码如下所示此时若想自定义dialog元素的样式就可以通过CSS::part()函数实现只要将此函数的参数设置为对应元素的part属性值即可例如此时我们打开如下所示的zxx-alert元素看到的就是图所示的样式效果dialog元素默认的黑色边框不见了代之的是更加舒服的圆角效果。可以通过在浏览器中输入https://www.htmlapi.cn/10/1-2.html来访问体验上述效果。4.2、嵌套组件解决方案exportparts属性exportparts属性的作用也是对外暴露元素的匹配接口区别在于exportparts属性是设置在组件内的组件元素上的而part属性是设置在组件内的普通元素上的。例如我们再自定义一个按钮组件元素来替换zxx-alert组件中的button元素不妨就称之为zxx-button元素相关代码如下所示此时要想对zxx-button元素中创建的button元素进行样式设置就需要exportparts属性进行穿透例如于是在页面中我们就可以使用::part(button)函数对zxx-alert组件中的button元素进行样式设置了例如此时弹出框显示的按钮如图所示明显好看多了。可以通过在浏览器中输入https://www.htmlapi.cn/10/1-3.html访问来体验上述效果。1.支持多属性值exportparts属性值可以设置为多个以逗号分隔例如2.支持别称exportparts属性值还支持别称使用冒号区分原名和别称例如此时按钮的样式可以使用::part(btn)函数进行匹配。5、后起之秀is属性is属性是一个HTML全局属性配合JavaScript代码可以让任意内置的HTML元素变成内置的自定义组件。这个属性不难理解只需要一个简单的案例即可还是以dialog对话框元素为例dialog元素内置了显示和隐藏的方法但是很奇怪这两个方法的名称并不是相对的弹框显示是dialog.show()方法弹框隐藏却是dialog.close()方法很多人在使用的时候会执行错误所以是不是可以让dialog元素天然支持hide()方法呢自然可以通过一个简单的定义和注册以及is属性就可以了完整的代码如下所示此时只要给dialog元素设置is“zxx-dialog”此dialog元素就可以调用hide()方法了例如此时点击弹框元素内容的“关闭”按钮弹框就会隐藏。这就是is属性的作用可以让内置的HTML原生元素拥有自定义的属性和方法这是Web Components开发中非常重要的一个分支。不过Safari浏览器对is属性的支持不太友好然而不影响引入一段polyfill脚本就可以几乎无障碍地使用is属性的各个特征但不包括CSSdefined伪类也就是Safari浏览器的defined伪类只能匹配自定义组件元素无法匹配内置自定义元素。可以通过在浏览器中输入https://www.htmlapi.cn/10/1-4.html访问来体验上述效果。