js组件封装如何将标签内容_Web Component组件简介

前端开发正以惊人的速度发展。如今，大前端时代已经到来，如何在快速发展的技术栈中拥有一席之地，对于前端开发人员来说至关重要。在本文中，我将讨论为什么Web组件是在没有复杂框架或者构建的步骤的情况下提供高质量用户体验的出色工具，并且不会带来过时的风险。在这个由5部分组成的系列的后续文章中，我将更深入的研究每个规范。

在阅读本系列文章之前，我假定诸位已经对HTML，CSS，Javascript等基本概念已经有所了解并且有涉足。

本系列包含以下5个部分：

1. Web Component基本介绍
2. 创建自定义元素
3. 使用Shadow DOM封装样式和结构
4. 制作可以重复使用的HTML模板
5. 案例介绍

Web Component基本介绍

Web Component包含三种单独使用的技术，它们可以一起使用来创建封装功能的定制元素，并且可以在你喜欢的任何地方重用，并且不必担心代码冲突。

• Custom Component (自定义元素)：一组JavaScript API，允许您定义custom elements及其行为，然后可以在您的用户界面中按照需要使用它们。
• Shadow DOM(影子DOM)：一组JavaScript API，用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
• HTML templates(HTML模板)： 和 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

这些构成了Web组件规范。

实现web component的基本方法通常如下所示：

1. 创建一个类或函数来指定web组件的功能，如果使用类，请使用 ECMAScript 2015 的类语法(参阅类获取更多信息)。
2. 使用 CustomElementRegistry.define() 方法注册您的新自定义元素 ，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。
3. 如果需要的话，使用Element.attachShadow() 方法将一个shadow DOM附加到自定义元素上。使用通常的DOM方法向shadow DOM中添加子元素、事件监听器等等。
4. 如果需要的话，使用 和 定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。
5. 在页面任何您喜欢的位置使用自定义元素，就像使用常规HTML元素那样。

除Microsoft Edge和Internet Explorer 11之外，所有主要浏览器中通常都可以使用Web组件，但是可以使用polyfill来填补这些空白。

将这些中的任何一个称为Web组件在技术上都是准确的，因为该术语本身有点过载。结果，每种技术都可以独立使用或与其他任何一种组合使用。换句话说，它们不是互斥的。

下面我们快速浏览一下这三个基本概念，我会在后续的本系列其他文章中深入的研究它们。

自定义元素

借助自定义元素，Web开发人员可以创建新的HTML标签，增强现有的HTML标签或者扩展其他开发人员编写的组件。HTML目前已有的标签，缺乏自动将JS行为和标签关联的行为。自定义元素可以使HTML现代化，可以方便的将JS行动和标签本身关联起来。API是Web组件的基础。一个自定义元素的使用，和普通的div的使用没有任何区别。

以下，定义了一个自定元素：

通过JS API定义一个自定义元素 my-component

可以看到，自定义元素不需要使用外部的任何框架，浏览器供应商致力于规范的持续向后兼容性，几乎可以保证根据规范编写的组件不会遭受API更改的破坏。只需要使用相应的API，就可以做一个自定义元素。这些自定义组件可以与现今最流行的三大框架(React，Angular，Vue)一起使用。

Shadow DOM(影子组件)

Shadow DOM是四个Web组件标准之一：HTML模板、Shadow DOM、自定义元素以及HTML Imports

影子DOM是普通DOM的的封装版本。它可以有效地将DOM片段彼此隔离，包括可以用作CSS选择器的所有内容以及与之关联的样式。通常来说，文档范围内的任何内容都成为Light DOM，而影子根内部的内容则被称为Shadow DOM。

它有以下几个特点：

1. 隔离的DOM：组件的DOM是独立的(例如， document.querySelector()不会返回组件的影子DOM中的节点)。
2. 作用域CSS：在阴影DOM中定义的CSS作用域。样式规则不会泄漏，页面样式也不会渗入。
3. 组成：为您的组件设计一个基于声明的基于标记的API。
4. 简化 CSS：作用域DOM意味着您可以使用简单的CSS选择器，更通用的ID /类名，而不必担心命名冲突。

创建一个shadow dom:

JS:

演示：

HTML模板

适当命名的HTML 元素使我们可以在常规HTML流中标记出可重复使用的代码模板，这些模板不会立即呈现，但可以在以后使用。

使用Template:

展示：

总结

随着Web开发的日益复杂，对于像我们这样的开发人员而言，开始将越来越多的开发推迟到Web平台本身已经变得很有意义，这将变得有意义。Web组件规范是一组低级API，随着开发人员的发展，它们会随着我们的需求而不断增长和发展。

在下一篇文章中，我们将更深入地研究其中的自定义元素部分。然后，我们将讨论影子DOM。然后，我们会深入讨论相关的HTML模板部分，最后，我会有一些案例介绍给大家。