深圳网站设计：如何使用Web组件创建自己的HTML元

Web组件目前正兴奋地被称为即将到来的“ 网络开发的构造转变 ”，承诺永久地重塑网页设计前景。大型企业正在向前发展，将网络组件变为现实。Google和Mozilla都已逐步推出原生浏览器支持。

你问的网页组件是什么？深圳网站设计简而言之，Web组件为您提供了一种创建自己的自定义HTML元素的方法，这些元素可以执行您需要的任何内容。您可以将所有内容整理成漂亮，整洁的小型自定义HTML元素，而不是使用详细标记，长脚本和重复代码来加载您的网站。

了解Web组件

了解Web组件如何允许自定义HTML元素的最简单方法是首先查看我们已经从HTML5中了解的现有元素：<video>标记。使用此元素，您只需几行代码即可放置视频，例如：

您可能只看到上面的几行HTML，但这里是<video>元素在幕后的真实情况：

默认情况下，浏览器隐藏所有详细的代码，因此您不需要查看它或担心在您想要放置视频时编写它。你只重击在你<video>和<source>标签，你是启动和运行。 

以前，只有浏览器供应商才能以这种方式创建元素。但想象一下，如果您可以将自己的相同方法用于其他类型的内容吗？ 

以图片幻灯片为例。通常，您需要几轮带有特定类名称的嵌套div来处理幻灯片包装，包装每张幻灯片以及添加标题和缩略图。您还需要通过一些内联jQuery / JavaScript为幻灯片转换效果设置任何整体幻灯片选项。

如果你可以跳过所有这些而只是使用：

使用Web组件，这正是您可以做的。 

创建自己的HTML元素

如果您想提供一种简洁，易于与放置内容的方法进行交互，否则这些内容会变得臃肿和笨拙，您可以继续创建自己的Web组件。

Web组件也可以轻松共享，因此当开发人员加入时，您可以轻松获取最常见项目要求的预构建Web组件。我们已经看到自由共享的组件从   语音识别中弹出来。 

以  展示建设者 ..

让我们来看看Web组件幕后的内容。

是什么使Web组件

目前存在的Web组件由四部分组成：

• 自定义元素

• 影子DOM

• 模板

• HTML导入

自定义元素

自定义元素正是它们听起来的样子：可以命名为您选择的任何元素，并以您想要的任何方式操作。当我以任何方式说什么时，我的意思是。例如，我提出了<x-gangnam-style>元素：

自定义元素以最简单的形式声明，如下所示：

创建自定义元素时，可以从头开始完成，也可以扩展现有的HTML元素（<button>例如），并为其提供所需的修改功能或演示文稿。

注意：值得指出的是，由于并发症，该<element>标签在2013年已被弃用。它可能会产生回报，但与此同时还有polyfill选项，我们将在稍后讨论。感谢Addy Osmani  指出这一点！

暗影DOM

Shadow DOM实际上是Web组件工作方式的核心方面。之前，我们查看了HTML5 <video> 元素，并展示了尽管只看到几行代码，但实际上默认隐藏了相当多的代码。隐藏代码所在的地方称为“Shadow DOM”。

浏览器供应商多年来一直使用这个shadow DOM来本地实现输入，音频，视频等元素。通过Web组件，任何开发人员现在都可以使用它。

一般的想法是你在标记放置期间获取所有不需要看到的代码，并在Shadow DOM中隐藏它，这样它就不会妨碍它。这使您只需处理相关信息，例如使用<video>元素时的高度，宽度和源文件位置。

使用Shadow DOM最酷的事情之一就是每个实例都是它自己的小自包含世界。因此，如果您在元素中包含样式和脚本，则它们不会意外泄漏并影响页面上的任何其他内容。 

相反，页面上其他地方的CSS和JavaScript不会影响您的Web组件，除了您可能专门创建的样式挂钩以允许外部CSS定位。所有这一切都意味着不再担心命名空间的ID和类名以避免冲突。

如果你想看看影子DOM的样子，那很简单。确保您正在运行Chrome的最新安装，打开开发工具，单击齿轮图标以打开设置，然后选中标记为显示用户代理阴影DOM的框：

然后，当您使用shadow DOM检查任何元素时，您将看到其完整代码。通过检查<x-gangnam-style>带有和不带有阴影DOM 的元素来试试：http：  //html5-demos.appspot.com/gangnam

对于影子DOM的完整纲要，请查看：  Shadow DOM简介

模板

我们已经介绍了自定义元素如何只关注相关信息，而所有剩余代码都在shadow DOM中被隐藏。Web组件中的模板包含剩余代码的所有表示元素。

作为定义标记<template>...</template>放置的Web组件的代码的一部分，在这些标记之间包含组件所需的任何HTML和CSS。

例如，查看创建<x-gangnam-style>Web组件的代码。它的开始<template>标记位于第4行，其结束</template>标记位于第201行。在这些标记之间，您将看到负责创建定位和动画的所有CSS，以及放置所涉及的每个图像的HTML。 

HTML导入

HTML导入允许您采用上述所有内容并实际使其在您的页面上运行。Web组件在外部HTML文件中定义，因此需要导入该文件才能使自定义元素起作用。HTML导入通过<link>标记来处理，您可以通过标记导入外部CSS文件。

例如，在使用<x-gangnam-style>Web组件之前，您必须导入定义它的HTML文件，如下所示：

浏览器支持和Polyfill

潜在客户首先使用它们的想法非常吸引人，但目前浏览器支持还不可行。目前的支持状态如下：

原生支持正在为Chrome，Opera和Firefox实施，但尚未完成。IE和Safari还没有公布他们的计划，但是考虑到大多数  浏览器最终将支持Web组件，其他浏览器可能会效仿。

现在，如果您想开始使用Web组件，则需要使用其中一个可用的polyfill。好消息是两个最流行的解决方案是由Google和Mozilla创建的，因此我们可以期待看到与本机支持最终运营方式的一致性。

Google的聚合物

很难不倾向于使用Polymer，  因为Chrome现在是使用最广泛的浏览器，您可能会考虑在开发过程中考虑如何将Google组件代码编入索引。

Polymer附带了一个完整的预构建Web组件库。它包括功能导向的“ 聚合物核心元素 ”和面向设计的“ 纸元素”。

使用Polymer创建自定义元素时，而不是使用<element name="...">您使用  的格式  <polymer-element name="...">。

聚合物将自己描述为处于“开发者预览”状态，而不是绝对生产就绪，但他们也说 

...尽管标签很多人已经在生产中使用聚合物取得了成功。

浏览器支持

• Chrome Android

• 铬

• 加纳利

• 火狐

• IE 10+

• Safari 6+

• 移动Safari

如果你需要迎合IE9，估计它占据了  1.9％  到  5.11％  的市场份额，不幸的是你对Polymer来说运气不好。但是，您仍然可以使用Mozilla的X-Tags。

Mozilla的X-Tags

X-Tags是由Mozilla创建的JavaScript库，目前，它比Polymer更具优势，因为它的浏览器支持范围更广。如果这是您的主要考虑因素，X-Tags可能是您的首选。

浏览器支持

• Firefox 5+桌面和移动

• Chrome 4+

• Chrome Android 2.1+

• Safari 4+桌面和移动设备

• IE9 +

• Opera 11+桌面和移动设备

IE8支持

现在，如果您需要支持IE8，那么遗憾的是，Web组件可能不适合您，因为可用的polyfill支持IE9 +。估计IE8用户大约在2.1％  到3.82％之间，但当然如果你自己的统计数据有所不同，那么你必须对你的浏览器支持应该延伸多久做出判断。

Ember.js和AngularJS组件

您可以准备过渡到使用Web组件的一种可能方法是暂时使用Ember.js或AngularJS  。两者都有自己的组件创建系统，并且都承诺在完全可用时转换为利用本机Web组件代码。

结论

深圳网站设计我希望您喜欢阅读这些Web组件的概述以及您应该关注的原因！还有很多内容可以深入研究，但是考虑到这些基础知识，我们有很多机会可以获得有关实际构建自定义Web组件的教程。你怎么看？在什么情况下你会看到自己使用它们？