前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Web Components是不是Web的未来

Web Components是不是Web的未来

作者头像
葡萄城控件
发布于 2018-01-10 10:03:36
发布于 2018-01-10 10:03:36
1.9K00
代码可运行
举报
运行总次数:0
代码可运行

今天 ,Web 组件已经从本质上改变了HTML。初次接触时,它看起来像一个全新的技术。Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力,可以自由的进行定制组件。面对新的技术,你可能会觉得无从下手。那这篇文章将为你揭开Web组件神秘的面纱。如果你已经熟知HTML标签和DOM编程,已经拥有了大量可用的Web组件,那么你已经是Web组件专家了。

Web组件的现状

随着各式各样的用户需求,浏览器的原生组件已经无法满足需求。Web组件也就变得越来越重要。

我们将以自定义一个传统三方插件为例来介绍Web组件。

首先,需要引用插件的CSS和JavaScript资源:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<link rel="stylesheet" type="text/css" href="my-widget.css" />

<script src="my-widget.js"></script>

接下来,我们需要向页面中添加占位符。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div data-my-widget></div>

最后,我们需要使用脚本来找到并且实例化这个占位符为Web组件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 使用 jQuery 初始化组件

$(function() {

$('[data-my-widget]').myWidget();

});

通过以上是三个基本步骤。已经完成了在页面中添加了自定义插件,但是浏览器无法确定自定义组件的生命周期,如果通过以下方式声明则使自定义组件生命周期变得清晰了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
el.innerHTML = '<div data-my-widget></div>';

因为这不是一个内置的组件,我们现在必须手动实例化新组件,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$(el).find('[data-my-widget]').myWidget();

避免这种复杂设置方法的有效方式是完全抽象DOM交互。不过,这个动作也比较复杂,需要创建框架或者库来自定义组件。

面临的问题

组件一旦被声明,占位符已经被替代为原生的HTML标记:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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开发不可或缺的部分:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!—导入: -->

<link rel="import" href="my-widget.html" />

<!—使用:-->

<my-widget />

在这个实例中,我们通过导入HTML来添加组件并且立即使用。

更重要的是,因为<my-widget />是浏览器原生支持的组件,它直接挂在浏览器的生命周期中,允许我们像添加原生组件一样添加三方组件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
el.innerHTML = '<my-widget />';

// 插件当前已经被实例化

当查看这个组件的HTML 源码,你会发现它仅仅是一个单一的标签。如果启用浏览器Shadow DOM 特性,才可以查看标签内的组件,你将会发现一些有趣的事情,

当我们谈论Web组件时,我们不是在谈论一门新技术。Web组件最初的目的是给我们封装能力,它可以通过自定义组件和Shadow DOM 技术来实现。所以,接下来,我们将着重介绍下这两项技术。介绍以上两个技术之前,我们最好先梳理下已知浏览器原生组件。

已知的HTML组件

我们知道组件可以通过HTML标记或JavaScript来实例化:

使用标记实例化:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="text" />
document.createElement('input');
el.innerHTML = '<input type="text" />';

使用JaveScript实例化:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
document.createElement('input') 

document.createElement('div')

添加带有属性的HTML标签:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 创建带有属性的input标签...

el.innerHTML = '<input type="text" value="foobar" />';

//这时value属性已经同步

el.querySelector('input').value;

组件可以响应属性的变化:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 如果我们更改value 属性值
input.setAttribute('value', 'Foobar');

//属性值会立即更改
input.value === 'Foobar'; // true

组件可以有内部隐藏的DOM结构:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!—使用一个input实现复杂的日历功能-->
<input type="date" />
 
 // 尽管其内部结构比较复杂,但是已经封装成为一个组件
dateInput.children.length === 0; // true

组件可以使用子组件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!—可以给组件提供任意个 'option' 标签-->

<select>

<option>1</option>

<option>2</option>

<option>3</option>

</select>

组件可以为其子组件提供样式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
dialog::backdrop {

background: rgba(0, 0, 0, 0.5);

}

最后,组件可以有内置样式。和自定义插件不同,我们不需要为浏览器的原生控件引用CSS文件。

有了以上的了解,我们已经具备了解Web组件的基础。使用自定义组件和Shadow DOM,我们可以在我们的插件中定义所有这些标准行为。

自定义组件

注册一个新组件也比较简单:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var MyElement = document.register('my-element');

// 'document.register' 返回一个构造函器

你也许注意到上面的自定义组件名称包含一个连接符。这是为了确保自定义组件名称不和浏览器内置组件不冲突。

现在<my-element />这个组件具备了原生组件的特性,

所以,自定义组件也同样可以进行普通的DOM操作:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
document.create('my-element');

el.innerHTML = '<my-element />';

document.create('my-element');

构建自定义组件

当前,这个自定义组件仅仅有框架,而没有内容,下面让我们向其中添加一些内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//我们将提供'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之外,我们添加一些额外的操作:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
createdCallback: {

value: function() {

var shadow = this.createShadowRoot();

shadow.innerHTML = '<h1>SHADOW DOM!</h1>';

}

}

在这个例子中, 你会注意到‘SHADOW DOM!’,但是查看源码时你会发现只有空白的<my-element /> 标签而已。这里使用创建Shadow Root 方法替代了直接修改页面。

Shadow Root中的任何组件,是肉眼可见的,但是和当前页面的样式和DOM API相隔离。这样就实现了自定义组件是一个独立组件的假象。

添加“轻量级DOM”

目前为止,我们的自定义组件是空标签,但是如果向其中添加内部组件会出现什么现象呢?

我们假设自定义组件包含的节点如下,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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 中。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
createdCallback: {

value: function() {

var shadow = this.createShadowRoot();

// 子组件'i' 标签现在已经消失了

shadow.innerHTML =

‘轻量级 DOM 中的 "i" 标签为: ' +

'<content select="i" />';

//现在,在 Shadow DOM 中只有 'i' 标签是可以见的。

}

}

封装样式

Shadow DOM 最重要的作用是创建了和当前页面隔离的Web组件,使Web组件不受当前页面样式和JaveScript脚本的影响。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
createdCallback: {

value: function() {

var shadow = this.createShadowRoot();

shadow.innerHTML =

"<style>span { color: green }</style>" +

"<span>I'm green</span>";

}

}

反之,在 Shadow DOM 中定义的样式也不会影响之外的标签样式。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<my-element />

<span>I'm not green</span>

揭露钩子的秘密

当隐藏自定义组件内部标记,有时也需要在当前页面对组件中的内部特定组件进行样式设置。

例如,如果我们自定义一个日历插件,在不允许用户控制整个插件的情况下,允许最终用户去定义按钮的样式。

这是其中的部分特性和伪组件:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
createdCallback: {

value: function() {

var shadow = this.createShadowRoot();

shadow.innerHTML = 'Hello <em part="world">World</em>';

}

}

这是在当前页面设置自定义组件内部组件样式的方法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
my-element::part(world) {

color: green;

}

这部分内容介绍了封装web组件的基本方式。Shadow DOM 是我们可以任意修改Web组件中的标签。在例子中,我们设置了“World”的样式,但是使用者却无法判断它是<em>标签。

在你尝试自定义Web组件之前,需要确保浏览器的相关特性已经打开。如果使用 Chrome,在 Chrome 中打开chrome://flags ,并且开启“experimental Web Platform features”。

这仅仅是个开始

所有本文中介绍的内容,都是模拟一些简单的浏览器标准行为。我们已经习惯于和原生的浏览器组件进行交互,因此自定义组件的步骤并不是想象中的那个难。Web组件最终提供我们一种实现简单、一致、可复用、封装和组合部件的方法,这是一个有意义的开始。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014-01-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Web Components 的使用,从入门到基础
Web Components[以下简称"WC"],使用自定义元素(custom elements)来代替div,故能使用div的得房就能使用它。因此,使用WC,只需要在HTML中引入js文件即可。它不并不像目前主流的组件框架,需要外部支撑。例如,如果你要使用React组件,那你大概率的情况下要使用ReactJS。
前端修罗场
2023/10/07
4270
Web Components 的使用,从入门到基础
Web Components
也就是说,Web Components是Web组件模型标准,由浏览器提供原生特性支持,包括Shadow DOM,Custom Elements,HTML Imports和HTML Templates
ayqy贾杰
2019/06/12
1.3K0
Web Components
【Web技术】264- Web Component可以取代你的前端框架吗?
还记得当document.querySelector最开始被广泛的被浏览器支持并且结束了无处不在的JQuery。这最终给我们提供了一个原生的方法,虽然JQuery已经提供了很久。我觉得这同样将会发生在像Angular和React这的前端框架身上。
pingan8787
2019/07/25
2.7K0
web components 初识
是一个Web组件标准。Web Components通过一种标准化的非侵入的方式封装一个组件,每个组件能组织好它自身的HTML、CSS、JavaScript,并且不会干扰页面上的其他代码。
薛定喵君
2020/12/14
4710
深入解剖前端,你不知道的Web 组件标准
组件化使得复杂的前端结构变得清晰,各个部分独立起来,高内聚低耦合,使得维护成本大大降低。
一墨编程学习
2018/11/22
1.1K0
Web Components:自定义元素与Shadow DOM的实践
Web Components是现代Web开发中用于创建可重用和封装的自定义HTML元素的一组技术。它包括Custom Elements、Shadow DOM、HTML Templates和Slots。
天涯学馆
2024/05/17
2850
深入理解Shadow DOM v1[每日前端夜话0x63]
shadow DOM不是超级英雄电影中的恶棍,也不是DOM的黑暗面。 shadow DOM只是一种解决文档对象模型(或简称DOM)中缺少的树封装方法。
疯狂的技术宅
2019/05/15
1.2K0
Web Components 上手指南
现在的前端开发基本离不开 React、Vue 这两个框架的支撑,而这两个框架下面又衍生出了许多的自定义组件库:
童欧巴
2021/03/18
1K0
Web Components 上手指南
Web Components 初探
任何 UI 框架或库最期望目标之一是帮助我们建立通用的模式或约定。
QQ音乐前端团队
2018/10/27
2.7K0
Web Components 初探
【Web技术】400- 浅谈Shadow DOM
你在实际的开发中很可能遇到过这样的需求:实现一个可以拖拽的滑块,以实现范围选择、音量控制等需求。
pingan8787
2019/11/05
5830
八个 Web Components 前端框架,一定有一个你用得上
通过之前的系列文章,大家对 Web Components 一定有了一个深入的了解。通过实战也对 Web Components 怎么写、怎么用比较熟悉了。
用户6256742
2024/07/31
9490
八个 Web Components 前端框架,一定有一个你用得上
shadow dom解析
1.shadowdom解析 1.1 什么是shadow dom 先看个例子: <video controls autoplay name="media"> <source id="mp4"
IMWeb前端团队
2017/12/29
1.3K0
shadow dom解析
来一瓶 Web Component 魔法胶水
Web Component 已经被浏览器广泛支持,不再是新鲜玩意了,它有很多使用场景,比如编写跨框架的组件库、微前端,完全用它开发复杂的应用也没问题。
_sx_
2023/10/23
6340
来一瓶  Web Component 魔法胶水
Web components
Web components是一组Web平台API和用于创建和使用可重复使用的自定义HTML元素的规范,旨在帮助我们封装和打包其UI元素和功能,从而更容易构建模块化、可维护和可重用的Web应用程序组件。
zayyo
2024/02/05
1510
web components的一些知识点
上篇文章大致说了一下用web-components重新封装UI库的思路,并附了一个demo,代码写的垃圾,无所谓了,重要的是有思路才行。这次大致对web components这个东西,简单的做下介绍。
terrence386
2022/07/14
4930
【总结】- 从 0 到 1 上手 Web Components 业务组件库开发
组件化是前端发展的一个重要方向,它一方面提高开发效率,另一方面降低维护成本。主流的 Vue.js、React 及其延伸的 Ant Design、uniapp、Taro 等都是组件框架。Web Components 是一组 Web 原生 API 的总称,允许我们创建可重用的自定义组件,并在我们 Web 应用中像使用原生 HTML 标签一样使用。目前已经很多前端框架/库支持 Web Components。
pingan8787
2021/12/29
2K1
【总结】- 从 0 到 1 上手 Web Components 业务组件库开发
Web Components 详解
我们在业务中经常会自行定义ui 控件,这确实能达到复用的目的,但是它不是常常有效,但是有时它也会表现的糟糕,比如样式错乱。
前端知知
2022/09/29
1.2K0
Web Components 详解
Web Components-LitElement 实践
Google 在 2011 年首次正式提出 Web Components 组件化概念时,它主要依赖三个技术:Custom Element、Shadow Dom、HTML Templates。直到 2015 年 Google 才真正投入生产进行使用,那时其他浏览器厂商还没有大规模支持这个特性,应用起来存在很大的兼容问题。
政采云前端团队
2022/08/30
3.6K0
Web Components-LitElement 实践
WebComponent魔法堂:深究Custom Element 之 标准构建
前言  通过《WebComponent魔法堂:深究Custom Element 之 面向痛点编程》,我们明白到其实Custom Element并不是什么新东西,我们甚至可以在IE5.5上定义自己的alert元素。但这种简单粗暴的自定义元素并不是我们需要的,我们需要的是具有以下特点的自定义元素: 自定义元素可通过原有的方式实例化(<custom-element></custom-element>,new CustomElement()和document.createElement('CUSTOM-ELEMEN
^_^肥仔John
2018/01/18
9710
WebComponent魔法堂:深究Custom Element 之 标准构建
Web Components从技术解析到生态应用个人心得指北
Web Components 是一种使用封装的、可重用的 HTML 标签、样式和行为来创建自定义元素的 Web 技术。
周陆军博客
2024/01/18
7880
相关推荐
Web Components 的使用,从入门到基础
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验