web components是不是web的未来

随着各式各样的用户需求，浏览器的原生组件已经无法满足需求。web组件也就变得越来越重要。我们将以自定义一个传统三方插件为例来介绍web组件。首先，需要引用插件的css和j**ascript资源：<link rel="stylesheet" type="text/css" href="my-widget.css" /><script src="my-widget.js"></script>接下来，我们需要向页面中添加占位符。<div data-my-widget></div>最后，我们需要使用脚本来找到并且实例化这个占位符为web组件。// 使用 jquery 初始化组件$(function() {$('[data-my-widget]').mywidget();});通过以上是三个基本步骤。已经完成了在页面中添加了自定义插件，但是浏览器无法确定自定义组件的生命周期，如果通过以下方式声明则使自定义组件生命周期变得清晰了。el.innerhtml = '<div data-my-widget></div>';因为这不是一个内置的组件，我们现在必须手动实例化新组件，$(el).find('[data-my-widget]').mywidget();避免这种复杂设置方法的有效方式是完全抽象dom交互。不过，这个动作也比较复杂，需要创建框架或者库来自定义组件。面临的问题组件一旦被声明，占位符已经被替代为原生的html标记：<div data-my-widget><div class="my-widget-foobar"><input type="text" class="my-widget-text" /><button class="my-widget-button">go</button></div></div>这样做的弊端是，自定义组件的标记和普通html组件的标记混杂在一起，没有清晰的分割和封装。这就不可避免的会出现命名及样式等冲突。web组件的产生随着三方web组件的发展，它已经成为了web开发不可或缺的部分：<!—导入： --><link rel="import" href="my-widget.html" /><!—使用：--><my-widget />在这个实例中，我们通过导入html来添加组件并且立即使用。更重要的是，因为<my-widget />是浏览器原生支持的组件，它直接挂在浏览器的生命周期中，允许我们像添加原生组件一样添加三方组件。el.innerhtml = '<my-widget />';// 插件当前已经被实例化当查看这个组件的html 源码，你会发现它仅仅是一个单一的标签。如果启用浏览器shadow dom 特性，才可以查看标签内的组件，你将会发现一些有趣的事情，当我们谈论web组件时，我们不是在谈论一门新技术。web组件最初的目的是给我们封装能力，它可以通过自定义组件和shadow dom 技术来实现。所以，接下来，我们将着重介绍下这两项技术。介绍以上两个技术之前，我们最好先梳理下已知浏览器原生组件。已知的html组件我们知道组件可以通过html标记或j**ascript来实例化：使用标记实例化：<input type="text" />document.createelement('input');el.innerhtml = '<input type="text" />';使用j**escript实例化:document.createelement('input') document.createelement('div')添加带有属性的html标签：// 创建带有属性的input标签...el.innerhtml = '<input type="text" value="foobar" />';//这时value属性已经同步el.queryselector('input').value;组件可以响应属性的变化:// 如果我们更改value 属性值input.setattribute('value', 'foobar');//属性值会立即更改input.value === 'foobar'; // true组件可以有内部隐藏的dom结构：<!—使用一个input实现复杂的日历功能--><input type="date" /> // 尽管其内部结构比较复杂，但是已经封装成为一个组件dateinput.children.length === 0; // true组件可以使用子组件:<!—可以给组件提供任意个 'option' 标签--><select><option>1</option><option>2</option><option>3</option></select>组件可以为其子组件提供样式:dialog::backdrop {background: rgba(0, 0, 0, 0.5);}最后，组件可以有内置样式。和自定义插件不同，我们不需要为浏览器的原生控件引用css文件。有了以上的了解，我们已经具备了解web组件的基础。使用自定义组件和shadow dom，我们可以在我们的插件中定义所有这些标准行为。自定义组件注册一个新组件也比较简单：var myelement = document.reg**ter('my-element');// 'document.reg**ter' 返回一个构造函器你也许注意到上面的自定义组件名称包含一个连接符。这是为了确保自定义组件名称不和浏览器内置组件不冲突。现在<my-element />这个组件具备了原生组件的特性，所以，自定义组件也同样可以进行普通的dom操作：document.create('my-element');el.innerhtml = '<my-element />';document.create('my-element');构建自定义组件当前，这个自定义组件仅仅有框架，而没有内容，下面让我们向其中添加一些内容：//我们将提供'document.reg**ter'的第二个参数：document.reg**ter('my-element', {prototype: object.create(htmlelement.prototype, {createdcallback: {value: function() {th**.innerhtml = '<h1>element created!</h1>';}}})});在这个例子中，我们设置自定义组件的prototype，使用object.create 方法创建一个继承于htmlelement的对象。在这个方法中修改该组件的属性 innerhtml。我们定义了createdcallback方法，在每次声明实例时调用。你同样可以有选择性的定义attributechangedcallback、 enteredviewcallback 和leftviewcallback等方法。目前为止我们实现了动态修改自定义组件内容的功能，我们仍然需要提供自定义组件的封装方法，用于隐藏其内部组件。使用shadow dom实现封装我们需要完善下createdcallback方法。本次，除了修改innerhtml之外，我们添加一些额外的操作：createdcallback: {value: function() {var shadow = th**.createshadowroot();shadow.innerhtml = '<h1>shadow dom!</h1>';}}在这个例子中， 你会注意到‘shadow dom!’，但是查看源码时你会发现只有空白的<my-element /> 标签而已。这里使用创建shadow root 方法替代了直接修改页面。shadow root中的任何组件，是肉眼可见的，但是和当前页面的样式和dom api相隔离。这样就实现了自定义组件是一个独立组件的假象。添加“轻量级dom”目前为止，我们的自定义组件是空标签，但是如果向其中添加内部组件会出现什么现象呢？我们假设自定义组件包含的节点如下，<my-element>这是一个轻量级 dom。<i>hello</i><i>world</i></my-element>一旦针对于这个组件的 shadow root 被创建，它的子节点不再存在。我们这些隐藏的子节点封装为轻量级dom节点。如果禁用了 shadow dom，上面这个例子仅仅会显示为：这是一个轻量级 dom‘hello world’。当我们在createdcallback方法中设置 shadow dom后，我们可以使用新增内容分配轻量级dom组件到shadow dom 中。createdcallback: {value: function() {var shadow = th**.createshadowroot();// 子组件'i' 标签现在已经消失了shadow.innerhtml =‘轻量级 dom 中的 "i" 标签为: ' +'<content select="i" />';//现在，在 shadow dom 中只有 'i' 标签是可以见的。}}封装样式shadow dom 最重要的作用是创建了和当前页面隔离的web组件，使web组件不受当前页面样式和j**escript脚本的影响。createdcallback: {value: function() {var shadow = th**.createshadowroot();shadow.innerhtml ="<style>span { color: green }</style>" +"<span>i'm green</span>";}}反之，在 shadow dom 中定义的样式也不会影响之外的标签样式。<my-element /><span>i'm not green</span> 20210311