Web Components初探
组件化，标签语义化，是前台发展的趋势。现在流行的组件化框架有React、Vue等，标签语义化在H5中增加的article、dialog等。
Web Components 就是相似的一套技术，允许您创立可重用的定制元素，并且在您的web应用中使用它们。
Web Components由三项主要技术组成，它们可以一起使用来创立封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。
- Custom elements（自己设置元素）：一组JavaScript API，允许您定义custom elements及其行为，而后可以在您的客户界面中按照需要使用它们。
- Shadow DOM（影子DOM）：一组JavaScript API，用于将封装的“影子”DOM树附加到元素（与主文档DOM分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们即可以被脚本化和样式化，而不用担心与文档的其余部分发生冲突。
- HTML templates（HTML模板）：
<template>和<slot>元素使您可以编写不在呈现页面中显示的标记模板。而后它们可以作为自己设置元素结构的基础被屡次重用。
实现web component的基本方法通常如下所示：
- 创立一个类或者函数来指定web组件的功能，假如使用类，请使用 ECMAScript 2015 的类语法(参阅类获取更多信息)。
- 使用
CustomElementRegistry.define()方法注册您的新自己设置元素 ，并向其传递要定义的元素名称、指定元素功能的类、以及可选的其所继承自的元素。 - 假如需要的话，使用
Element.attachShadow()方法将一个shadow DOM附加到自己设置元素上。使用通常的DOM方法向shadow DOM中增加子元素、事件监听器等等。 - 假如需要的话，使用
<template>和<slot>定义一个HTML模板。再次使用常规DOM方法克隆模板并将其附加到您的shadow DOM中。 - 在页面任何您喜欢的位置使用自己设置元素，就像使用常规HTML元素那样。
简单做一个显示文本的例子，感受以下Web Components代码如下：
main.js
class ShowText extends HTMLElement { constructor() { super() } connectedCallback() { const text = this.getAttribute('text'); this.outerHTML = `<div style="color: red;">文本为: <label>${text}</label></div>`; }}customElements.define('show-text', ShowText);index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./main.js"></script></head><body> <show-text text="hello world"></show-text> <show-text text="你好"></show-text></body></html>
测试结果
接下来会一个知识点一个知识点慢慢梳理~
参考地址：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Web Components初探
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Web Components初探
