一、什么是Web Component？
Web Component 的概念最早在 2011 年被 Google 提出，并在 2018 年 V1 版本开始被主流浏览器所支持（除了 IE）。Web Component 规范正式成为 W3C 的推荐标准。与Vue和React类似，都是基于组件化思想用于构建用户界面的一种框架，不同的是Web Component是使用封装的自定义HTML元素来创建可复用的组件，与此同时，它能够完美解决Html、css、js的复用问题，做到沙箱隔离，在任何地方使用都不会受到代码冲突影响。类似于我们熟知的html的video、audio标签。
二、基础认知
- web component 主要由三项主要技术组成：
- Custom element（自定义元素）：一组 JavaScript API，允许你定义 custom elements 及其行为，然后可以在你的用户界面中按照需要使用它们。 以下是一个简单的hello word例子：
<body> <hello-word /> <script> class HelloWord extends HTMLElement { constructor() { super(); this.append("hello world"); } } window.customElements.define("hello-word", HelloWord); </script> </body>
- 通过上述在页面上能显示hello word，实现了一个简单的自定义元素。
- Shadow DOM（影子 DOM）：一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，你可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。 如下所示，外部的样式即使设置了 !important 也无法影响到内部样式：
<body> <test-item-shadow></test-item-shadow> <div class="container">Test item</div> <style> .container { color: red !important; } </style> <template id="tpl"> <style> .container { color: blue; } </style> <div class="container">Test Item</div> </template> <script> class TestItemShadow extends HTMLElement { constructor() { super(); } connectedCallback() { const content = document.getElementById("tpl").content.cloneNode(true); const shadow = this.attachShadow({ mode: "open" }); shadow.append(content); } } window.customElements.define("test-item-shadow", TestItemShadow); </script> </body>
- 通过浏览器开发者工具，可以查看html的结构，生成了一个#shadow-root(open)标签，内部包含了我们自定义的组件，不会受到外部影响。
- HTML template（HTML 模板）： <template> 和 <slot> 元素使你可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
- 熟悉vue的小伙伴对于template和slot应该不陌生，以下是一个简单的例子：
template:
<body> <template id="test-template"> <p>test-template</p> </template> <script> let template = document.getElementById("test-template"); let templateContent = template.content; document.body.appendChild(templateContent); </script> </body>
slot：
<body> <template id="tpl-test"> <style> .title { color: green; } </style> <div class="title">标题</div> <slot name="slot-des">默认内容</slot> </template> <test-item> <div slot="slot-des">不是默认内容</div> </test-item> <script> class TestItem extends HTMLElement { constructor() { super(); } connectedCallback() { const content = document.getElementById("tpl-test").content.cloneNode(true); const shadow = this.attachShadow({ mode: "open" }); shadow.append(content); } } window.customElements.define("test-item", TestItem); </script> </body>
三、常用接口解析
- CustomElementRegistry
CustomElementRegistry接口提供注册自定义元素和查询已注册元素的方法。
- define()
通过define方法可以创建一个自定义元素
- name 自定义元素名
- constructor 自定义元素构造器,class TestItem extends HTMLElement { ...。
- options 控制元素如何定义。目前有一个选项支持：extends. 指定继承的已创建的元素。被用于创建自定义元素
window.customElements.define(name, constructor, options);
- get()
get() 方法指定名字的自定义元素的构造函数，如果没有使用该名称的自定义元素定义，则为undefined。
constructor = window.customElements.get(name);
- upgrade()
upgrade() 方法将更新节点子树中所有包含阴影的自定义元素，甚至在它们连接到主文档之前也是如此。
const el = document.createElement("spider-man"); class SpiderMan extends HTMLElement {} customElements.define("spider-man", SpiderMan); console.assert(!(el instanceof SpiderMan)); // not yet upgraded customElements.upgrade(el); console.assert(el instanceof SpiderMan); // upgraded!
- whenDefined()
来检测生成菜单的自定义元素何时被定义。这个菜单显示占位符内容一直到菜单内容已经准备好显示
- attachShadow()
Element.attachShadow() 方法给指定的元素挂载一个 Shadow DOM，例：
const shadow = element.attachShadow({ mode: "open" });
- mode参数：
- pen： shadow root 元素通过 js 从外部访问根节点
- closed：拒绝 js 从外部访问关闭的 shadow root 节点
- append()
append()方法在 Element的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。
shadow.append(content); //content为dom对象
上述简单列举了几个常用的接口方法，更多使用可直接查看MDN：developer.mozilla.org/zh-CN/docs/…
四、最后
第一次接触web component是在使用ArcGis Js API时，发现官方使用了大量的web component，个人学习测试下来，发现与现在主流的Vue和React框架相比还是有一定的差距，少了一些生命周期方法的概念、状态管理、虚拟dom优化机制等，但在不使用框架的前提下，对于纯原生开发，这也是一个比较实用的工具，殊途同归，也许未来某一天它就成为了前端开发的新热门。
参考：
本文内容摘自稀土掘金，作者叶落风尘，详情查看链接：
https://juejin.cn/post/7305977418699817011
好啦！小弹的分享到此为止。我们更欢迎您分享您对阿里云产品的设想、对功能的建议或者各种吐槽，请扫描提交问卷并获得社区积分或精美礼品一份。https://survey.aliyun.com/apps/zhiliao/P4y44bm_8
【扫码填写上方调研问卷】
欢迎每位来到弹性计算的开发者们来反馈问题哦~
