前端新趋势?有了Web Component,还用纠结Vue或React?
什么是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例子:
scala
<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
也无法影响到内部样式:
xml
<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:
xml
<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:
xml
<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. 指定继承的已创建的元素。被用于创建自定义元素
ini
window.customElements.define(name, constructor, options);
get()
get() 方法指定名字的自定义元素的构造函数,如果没有使用该名称的自定义元素定义,则为undefined
ini
constructor = window.customElements.get(name);
upgrade()
upgrade() 方法将更新节点子树中所有包含阴影的自定义元素,甚至在它们连接到主文档之前也是如此。
scala
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,例:
ini
const shadow = element.attachShadow({ mode: "open" });
mode参数: open: shadow root 元素通过 js 从外部访问根节点 closed:拒绝 js 从外部访问关闭的 shadow root 节点
append()
append()方法在 Element的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。
css
shadow.append(content); //content为dom对象
上述简单列举了几个常用的接口方法,更多使用可直接查看MDN:developer.mozilla.org/zh-CN/docs/...
最后
第一次接触web component是在使用ArcGis Js API时,发现官方使用了大量的web component,个人学习测试下来,发现与现在主流的Vue和React框架相比还是有一定的差距,少了一些生命周期方法的概念、状态管理、虚拟dom优化机制等,但在不使用框架的前提下,对于纯原生开发,这也是一个比较实用的工具,殊途同归,也许未来某一天它就成为了前端开发的新热门。