Web Components 入门实例教程

web前端开发

共 4735字,需浏览 10分钟

 ·

2020-10-29 09:19

来源 | http://www.ruanyifeng.com/blog/2019/08/web_components.html

组件是前端的发展方向,现在流行的React和Vue都是组件框架。
谷歌公司由于掌握了Chrome浏览器,一直在推动浏览器的原生组件,即Web组件API。部分第三方框架,原生组件简单直接,符合直觉,不用加载任何外部模块,代码量小。因此,它还在不断发展,但已经可用于生产环境。
Web组件API内容很多,这里不是全面的教程,只是一个简单的演示,让大家看一下怎么用它开发组件。

1、自定义元素

下图是一个用户卡片。
本文演示如何把这个卡片,写成Web Components组件,这里是最后的完整代码。
网页只要插入以下的代码,就会显示用户卡片。
这种自定义的HTML标签,称为自定义元素(custom element)。根据规范,自定义元素的名称必须包含连词线,用与区别原生的HTML元素。所以,不能写成

2、customElements.define()

自定义元素需要使用JavaScript定义一个类,所有都会是这个类的实例。
class UserCard extends HTMLElement {constructor() {super(); }}
上面代码中,UserCard就是自定义元素的类。注意,这个类的父类是HTMLElement,因此继承了HTML元素的特性。
接着,使用浏览器原生的customElements.define()方法,告诉浏览器元素与这个类关联。
window.customElements.define('user-card', UserCard);

3、自定义元素的内容

自定义元素目前还是空的,下面在类里面称为这个元素的内容。
class UserCard extends HTMLElement {constructor() {super();
var image = document.createElement('img'); image.src = ''; image.classList.add('image');
var container = document.createElement('div'); container.classList.add('container');
var name = document.createElement('p'); name.classList.add('name'); name.innerText = 'User Name';
var email = document.createElement('p'); email.classList.add('email'); email.innerText = 'yourmail@some-email.com';
var button = document.createElement('button'); button.classList.add('button'); button.innerText = 'Follow';
container.append(name, email, button);this.append(image, container); }}
上面的代码最后一行,this.append()的this表示自定义元素实例。
完成这一步以后,自定义元素内部的DOM结构就已经生成了。

4、