引言
最近要做一个跨平台使用的卡片插件,考虑到插件的通用性,就选择了Web Components技术来实现
Web Components 概念
Web Components 是一套不同的技术,允许你创建可重用的定制元素(它们的功能封装在你的代码之外)并且在你的 web 应用中使用它们。
它由三项主要技术组成:
1、Custom element(自定义元素):一组 JavaScript API,允许您定义 custom elements 及其行为,然后可以在您的用户界面中按照需要使用它们。
2、Shadow DOM(影子 DOM):一组 JavaScript API,用于将封装的“影子”DOM 树附加到元素(与主文档 DOM 分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
3、HTML template(HTML 模板):<template>
和 <slot>
元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
兼容性
现阶段的 Safari 和 Chrome 已经都原生支持了 Web Components 的规范标准。Firefox,Edge 和 IE11 在 Polyfill 的支持下也都能很好的支持 Web Components。