网络组件概述

为了实现网络组件，使用了已知的技术，如 HTML5 用于醒目地排版内容，CSS3 用于格式化，JavaScript 用作程序联系。该基础通过下面的简短介绍进行了扩展。

HTML 模板: 模板元素已经是 HTML5 规范 [3] 的构成部分。通过它可以存放部分文件、样式表和脚本以便再次使用。内容和程序代码首先不被浏览器呈现或执行。模板可以作为样板使用，在需要时通过 JavaScript 在内容上进行进一步的丰富。

自定义元素: 基于组件的开发在加入自有的元素后会变得特别有吸引力。除了提供使用的 HTML 词汇外还可以生成新的元素。它们的名称必须包含一个破折号（例如 “mein-element”）并利用 registerEle-ment() 方法来进行告知。通过进一步调整，最终可以用作一个预定义的元素。

Shadow DOM: 与 HTML 内容和 CSS 属性的通信以及对用户事件的反应可以通过标准化的文档对象模型 (DOM) 来进行控制。附加的 Shadow DOM 实现了隐藏且从外部不可以访问的文件碎片、样式表和脚本代码封装，由此实现了自定义元素的分别处理和编辑。此外，这里还使用了 createShadowRoot() 方法，以便在主元素下创建“影子树”。

HTML 导入: 所述技术首先可以在 HTML 文件内激活。实际使用时使用外部托管的 Web 组件将会更加有趣。HTML 导入可以使用 CSS 整合已知的链接元素。通过其 href 属性可以载入相应的 HTML 文件，带模板、样式和脚本组件，然后再根据要求进行编辑。

浏览器支持: 如图 1 所示，所述设计策略目前为止获得了 Chrome 及其 Chromium 衍生品的最佳支持 [4, 5]。Firefox 火狐和 Safari 至少能识别模板。此外在 Firefox Custom Elements（火狐自定义元素）和 Shadow DOM 中使用选项 “dom.webcompo-nents.enabled | true” 激活。Microsoft 还在实施过程中，将来会将其集成在 Windows 10 提供的 Edge-Browser 浏览器中。通过简单整合的 Polyfill [6] 可以加载缺少的相应功能。

图 1：浏览器中技术的支持（版本状态：08/15) [3]

实际演示: 为了理解技术关系，创建了清晰明了的应用示例。按最小程度创建的 “Record-Widget” 可接受声音存储介质信息（“tm-record” 元素），然后根据图 2 所示使用紧凑窗口形式来进行显示。

图 2：“Record-Widget”示例组件

通过略微复杂的元素展示了采用 SVG 技术从数据到 “tm-piechart” 矢量图形的实现，参见图 3。在 [7] 下可以访问不同的版本和浏览器测试结果。

图 3：“Pie-Chart”示例组件

演讲中将探讨所使用代码的作用原理。安全说明的实施应作为技术通信领域的思维出发点。

网络组件从创意开始就提供了创建和使用可重复使用模块的有趣方法。生产性工作参照 Google [8] 的 Polymer 项目，将会具备很大优势，因为其支持跨浏览器的开发并提供了大量已预制好的组件。但也存在悲观和批评的声音 [9, 10]。也就是说，该主题还处于争议中。

文献说明与链;

[1] W3C：HTML 组件 – Web 应用程序组件化（注）；http://www.w3.org/TR/1998/NOTE-HTMLComponents-19981023

[2] W3C：Web 组件规范（编辑草稿）；http://w3c.github.io/webcomponents/

[3] W3C：HTML5 建议 – 模板元素；http://www.w3.org/TR/html5/script-ing-1.html#the-template-element

[4] WebComponents.org：浏览器支持；http://webcomponents.org/

[5] 我可以使用：Web 组件；http://caniuse.com/#search=web%20components

[6] GitHub：Polyfill webcomponents.js；https://github.com/WebComponents/webcomponentsjs

[7] Meinike, T.：使用 tm-piechart 组件的浏览器测试；http://datenverdrahten.de/test/tm-piechart/

[8] Polymer 作者：Polymer 文献；https://www.polymer-project.org/

[9] Rauschmayer, A.：Web 组件发生了什么？；http://www.2ality.com/2015/08/web-component-status.html

[10] entwickler.de：Web 组件 – 面临灭亡威胁？；https://entwickler.de/online/web/web-components-vom-aussterben-bedroht-165829.html