微信号:gh_bd8d6a989787

介绍:介绍各种前端技巧,帮助提高前端开发的速度,逐渐做到分分钟完成开发.

Web组件简介

2019-04-09 08:30 web前端程序员

前端开发正在以极快的速度发展。无数的文章、教程和Twitter帖子都在感叹这个曾经相当简单的技术栈的状态,这一点很明显。在本文中,我将讨论为什么Web组件是一个很好的工具,可以在不使用复杂框架或构建步骤的情况下呈现高质量的用户体验,而且不会有过时的风险。在本五-部分系列的后续文章中,我们将深入研究每个规范。

本系列文章假设你对HTML、CSS和JavaScript有基本的了解。如果你对某个领域不是很了解,不要担心,构建自定义元素实际上简化了前端开发中的许多复杂性。

#Web组件到底是什么?

Web组件由三个单独的技术组成,它们一起组合使用 :

  1. 自定义元素。非常简单, 使用一组JavaScript API创建的自定义模板, 行为和标签名等 (例如, <one-dialog>), 这些都是完全有效的 HTML元素。自定义元素在 HTML现行标准规范中有定义

  2. 影子 DOM。 能够分离CSS 和JavaScript, 差不多像一个<iframe>。这在现行标准DOM规范中有定义。

  3. HTML 模板。  调用时才呈现的HTML中的用户自定义模板。 <template> 标签在 HTML 现行 标准规范中有定义。.

它们一起组成了Web组件规范。

备注:HTML模块很可能是堆栈中的第四种技术,但它还没有在四大浏览器中实现。Chrome团队已经宣布打算在未来的版本中实现这些功能

Web组件通常在所有的主流浏览器中都可用,除了Microsoft Edge和Internet Explorer 11浏览器,但polyfills的存在可以用来填补这些缺口

用这三部分中的任何一个指代Web组件从技术上来说都是准确的,因为这个术语本身就有点宽泛。因此,每种技术都可以单独使用,也可以与其他技术结合使用。换句话说,它们并不相互排斥。

我们来逐一快速浏览一下这三种组件。我们将在本系列的其他文章中更深入地研究它们。

#自定义元素

顾名思义,自定义元素是HTML元素,像<div><section> 或<article>,但是我们可以自己对通过浏览器API定义的元素进行命名。自定义元素就像那些标准的HTML元素一样——名称用尖括号括起来——只不过它们总是有一个破折号,比如<news-slider> 或 <bacon-cheeseburger>。展望未来,浏览器厂商已承诺不再创建新的包含一个破折号的内置元素,以防止冲突。

自定义元素包含自己的语义、行为、标记,可以跨框架和浏览器共享。

在本例中,我们定义了<my-component>,这是我们自己的HTML元素。诚然,它并没有做什么,但是这是自定义元素的基本构建块。所有自定义元素都必须以某种方式扩展HTMLElement,以便在浏览器中注册。

自定义元素在没有第三方框架的情况下存在,浏览器供应商在致力于规范的持续向后兼容性,这几乎保证了根据规范编写的组件不会受到API更改的破坏。更重要的是,这些组件通常可以与当前最流行的框架(包括Angular、React、Vue和其他框架)一起开箱即用

#影子 DOM

影子DOM是DOM的一个封装版本。这允许作者有效地将DOM片段彼此隔离,包括可以用作CSS选择器的任何东西以及与它们关联的样式。通常,文档范围内的任何内容都称为 light DOM,影子根内的任何内容都称为影子DOM。

使用light DOM时,可以使用document.querySelector('selector')来选择元素,也可以使用element. queryselector ('selector')来选择任何元素的子元素;同样,可以通过调用shadowRoot.querySelector来锁定影子根的子节点,其中shadowRoot是对文档片段的引用——不同之处在于,影子根的子元素不能从light DOM中选择。例如,如果我们有一个包含<button>的影子根,调用shadowRoot.querySelector('button')将返回我们的按钮,但是没有一个文档查询选择器(document’s query selector)的调用会返回该元素,因为它属于另一个不同的DocumentOrShadowRoot实例。样式选择器也以同样的方式工作。

在这方面,影子DOM的工作方式有点像 <iframe>,它里边的内容会与文档的其他内容切割开;但是,当我们创建一个阴影根时,我们仍然可以完全控制页面的这一部分,但是范围仅限于上下文。这就是我们所说的封装

如果你曾经编写过重用相同id,或者依赖于CSS-in- js工具或CSS命名策略(如BEM) 的组件,那么影子DOM有可能改善你的开发体验。

设想以下场景:

除了<#shadow-root>伪代码(这里使用它来划分没有HTML元素的shadow边界)之外,HTML是完全有效的。要将影子根附加到上面的节点,我们可以运行以下命令:

影子根还可以使用<slot>元素包括其包含的文档中的内容。使用slot可以将来自外部文档的用户内容放置到阴影根中的指定位置。

#HTML模板

命名恰当的HTML<template>元素允许我们在一个正常的HTML流中剔除可重用的代码模板,这些模板不会立即渲染,但是可以在稍后使用。


上面的例子不会渲染任何内容,直到脚本解析完模板,实例化代码,然后告诉浏览器如何处理它。

备注:请注意,这个示例只创建一个模板(<template id="book-template">),没有任何其他的Web组件技术,这再一次说明这三种堆栈中的技术可以单独或结合使用。

表面上,使用模板API的服务的使用者可以编写任何形状或结构的模板,并且可以在以后创建。网站上的另一个页面可能使用相同的服务,但是模板的结构是这样的:

#圆满完成对Web组件的介绍

随着web开发变得越来越复杂,像我们这样的开发人员开始将越来越多的开发工作推迟到web平台本身,这将变得越来越有意义。Web组件规范是一组低级别的API,它们会随着我们的需求和开发者的发展而继续增长和发展。

在下一篇文章中,我们将深入研究本文中的HTML模板部分。然后,我们将继续讨论自定义元素和影子DOM。最后,我们将通过查看更高级别的工具以及与当今流行的库和框架的结合来总结这一切。

系列文章:

Web组件简介 (本文)

创建可重用HTML模板

从零开始创建自定义元素

使用影子DOM封装样式和结构

Web组件高级工具

英文原文:https://css-tricks.com/an-introduction-to-web-components/

译者:忧郁的红秋裤
 
web前端程序员 更多文章 预加载、预取和其他<link>标记 JavaScript生态系统总览(1) 我并不讨厌箭头函数 未来的JavaScript还缺少哪些特性?(1) 你不需要jQuery
猜您喜欢 【DHCP RELAY】三层交换机的配置 蚂蚁金服的 Service Mesh 演进之道? 漫画:什么是区块链?丨【极客帮区块链分享】 体验设计师成长之路的养成书籍 Python &amp; 机器学习项目集锦 | GitHub Top&