Web Components是不是Web的未来
发布网友
发布时间：2022-04-27 08:19
共1个回答
热心网友
时间：2022-04-15 05:58
我们将以自定义一个传统三方插件为例来介绍Web组件。
首先，需要引用插件的CSS和JavaScript资源：
<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标记或JavaScript来实例化：
使用标记实例化：
<input type="text" />
document.createElement('input');
el.innerHTML = '<input type="text" />';
使用JaveScript实例化:
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.register('my-element');
// 'document.register' 返回一个构造函器
你也许注意到上面的自定义组件名称包含一个连接符。这是为了确保自定义组件名称不和浏览器内置组件不冲突。
现在<my-element />这个组件具备了原生组件的特性，
所以，自定义组件也同样可以进行普通的DOM操作：
document.create('my-element');
el.innerHTML = '<my-element />';
document.create('my-element');
构建自定义组件
当前，这个自定义组件仅仅有框架，而没有内容，下面让我们向其中添加一些内容：
//我们将提供'document.register'的第二个参数：
document.register('my-element', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
this.innerHTML = '<h1>ELEMENT CREATED!</h1>';
}
}
})
});
在这个例子中，我们设置自定义组件的prototype，使用Object.create 方法创建一个继承于HTMLElement的对象。在这个方法中修改该组件的属性 innerHTML。
我们定义了createdCallback方法，在每次声明实例时调用。你同样可以有选择性的定义attributeChangedCallback、 enteredViewCallback 和leftViewCallback等方法。
目前为止我们实现了动态修改自定义组件内容的功能，我们仍然需要提供自定义组件的封装方法，用于隐藏其内部组件。
使用Shadow DOM实现封装
我们需要完善下createdCallback方法。本次，除了修改innerHTML之外，我们添加一些额外的操作：
createdCallback: {
value: function() {
var shadow = this.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 = this.createShadowRoot();
// 子组件'i' 标签现在已经消失了
shadow.innerHTML =
‘轻量级 DOM 中的 "i" 标签为: ' +
'<content select="i" />';
//现在，在 Shadow DOM 中只有 'i' 标签是可以见的。
}
}
封装样式
Shadow DOM 最重要的作用是创建了和当前页面隔离的Web组件，使Web组件不受当前页面样式和JaveScript脚本的影响。
createdCallback: {
value: function() {
var shadow = this.createShadowRoot();
shadow.innerHTML =
"<style>span { color: green }</style>" +
"<span>I'm green</span>";
}
}
反之，在 Shadow DOM 中定义的样式也不会影响之外的标签样式。
<my-element />
<span>I'm not green</span>
