Web Components
MDN 上对 Web Components 这个名词的解释是:
Web Components是一套不同的技术，允许您创建
可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。
当然，你也可以从W3C上学习组件规范。
Web Components[以下简称"WC"]，使用自定义元素(custom elements)来代替div，故能使用div的得房就能使用它。因此，使用WC，只需要在HTML中引入js文件即可。它不并不像目前主流的组件框架，需要外部支撑。例如，如果你要使用React组件，那你大概率的情况下要使用ReactJS。
开始前的准备
文章中的组件、自定义标签、自定义组件其实描述的是同一个东西。
Ploymer
WC 在整个前端的语境下更偏向于提供符合 DOM 标准的规范，而 Polymer 则是在这种规范之上的一种框架封装，虽然Ploymer不是必须的，但是使用 Polymer 可以带来更便利的组件化开发体验。
ShadyDOM与ShadyCSS
- ShadyDOM：是 Shadow DOM 的 polyfill 的官方名称。 ▪ 它通过劫持 HTMLElement 的原型方法来实现一些 Shadow DOM 节点拥有的功能，实际上它的
原理是把节点添加到了真实(light) DOM 节点之上。 - ShadyCSS：也是 polyfill 的名称，它提供了一些 Shadow DOM 节点内样式的封装，使得可以在真实 DOM 中模拟 scoped style 的效果。它的
原理是通过解析和重写 style 节点内部的样式规则来实现的。
开始创建一个自定义组件
WC一般具有以下几个部分：
- Shadow Dom
- Custom Elements
- HTML Imports
- HTML Templates
你可以在CanIUse上查到上述4部分的目前的支持情况。
OK , 现在我们新建一个项目目录my-app，如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cRbuf3m5-1649854195112)(media/15575787033865/15575806427046.jpg)]](https://ucc.alicdn.com/images/user-upload-01/2019051122015916.png)
然后，在命令行中开启http服务(请先确保你已安装该nodeJS服务npm install -g http-server)：
$ http-server
第一个Web Components
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My-App</title> <link rel="import" href="elements/my-app.html" id="my-app"> </head> <body> <my-app></my-app> </body> </html>
//my-app.html <template> <style> p { color: #ccc; } </style> <p>这是一个自定义元素！</p> </template> <script> class MyAppElement extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode:'open'}); const myApp = document.getElementById('my-app').import; const templateNode = myApp.getElementsByTagName('template')[0].content.cloneNode(true); shadowRoot.appendChild(templateNode); } connectedCallback() { console.log('my-app element is connected'); } } customElements.define('my-app', MyAppElement); </script>
注意，这里我们使用HTML imports在index.html中导入了my-app.html，这仅能在Chrome中实现。作为ES6模块的一部分，在将来可能会被废弃。因为，Ploymer正在开发相关的实现。
现在我们可以看到在页面上显示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-szvcHmdV-1649854195119)(media/15575787033865/15575813447083.jpg)]](https://ucc.alicdn.com/images/user-upload-01/2019051122021332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ltYWdpbmVDb2Rl,size_16,color_FFFFFF,t_70)
当然，除此之外我们也可以使用ES6 import实现：
ES6 import
现在的目录结构是这样：在elements目录下新建一个my-app.js和my-date.js。
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My-App</title> <script type="module" src="/elements/my-app.js"></script> </head> <body> <my-app></my-app> </body> </html>
//my-app.js import './my-date.js' class MyAppElement extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode:'open'}); shadowRoot.innerHTML = this.template(); } connectedCallback() { console.log('my-app element is connected'); } template() { return ` <style> p { color: #f00; } </style> <p>This is a custom element!</p> <my-date></my-date> `; } } customElements.define('my-app', MyAppElement);
//my-date.js class MyDateElement extends HTMLElement { constructor() { super(); this.now = new Date(); const shadowRoot = this.attachShadow({mode:'open'}); shadowRoot.innerHTML = this.template(); } connectedCallback() { console.log('my-date element is connected'); } template() { return ` <p>现在是<time datetime="${this.now.toISOString()}">${this.now.toLocaleString()}</p> `; } } customElements.define('my-date', MyDateElement);
现在我们可以看到页面：
但是，使用es6 import也会存在缺点：
- HTML标签和JS没有分开。我们看到，HTML标签是写在
template()方法中。而前面一种方案是将HTML标签写在<template>标签中。 - 无法在不同时刻加载某些文件。我们看到，
import在第一时间把需要的JS文件都加载进来了。
为了解决这个问题，我们需要采取以下方法:
- 动态加载JS
//动态加载JS const scriptElement = document.createElement('script'); scriptElement.src = '/elements/my-date.js'; document.head.appendChild(scriptElement);
import()
使用具有函数性的import()函数进行动态导入，返回Promise。
目前适用于Chrome 63+和Safari 11+。
参见：
解释
下面，使用一个代码示例，解释代码中不同部分的含义。请根据代码注释进行理解。
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="app.js"></script> </head> <body> <my-element></my-element> </body> </html>
- app.js
//生命周期函数的顺序：constructor -> attributeChangedCallback -> connectedCallback //attributeChangedCallback要在connectedCallback之前执行的原因： //1.web组件上的属性主要用来初始化配置。这意味着当组件被插入DOM时，这些配置需要可以被访问了 customElements.define('my-element',class extends HTMLElement{ static get observedAttributes() { return ['disabled']; } //构造函数一般是用来初始化状态和设置Shadow DOM。 //当时一个元素被创建时将会调用构造函数,如document.createElement constructor() { super(); //使用Shadow DOM，自定义元素的HTML和CSS完全封装在组件内。这意味着元素将以单个的HTML标签出现在文档的DOM树种。其内部的结构将会放在#shadow-root。 let style = document.createElement('style'); const shadowRoot = this.attachShadow({mode: 'open'});// 定义一个Shadow root,mode:'open'意味着可以再开发者工具找到它并与之交互；mode：closed则相反 //Shadow DOM还提供了局部作用域的CSS //所有的CSS都只应用于组件本身 //元素将只继承最小数量从组件外部定义的CSS,甚至可以不从外部继承任何CSS //在实际插入DOM前，它是不可见也不可解析的。这意味着定义在内部的任何资源都无法获取，任何内部定义的CSS和JavaScript只有当它被插入DOM中时，才会被执行。 //组件的所有样式都被定义在style标签内，如果你想使用一个常规的<link rel="stylesheet">标签，你也可以获取外部样式 shadowRoot.innerHTML = ` <div id="container" class="disabled"> <h1>web Components</h1> </div> `; shadowRoot.appendChild(style); //当Shadow root被创建之后，你可以使用document对象的所有DOM方法， this.container = this.shadowRoot.querySelector('#container');//查找元素 //还可以使用:host选择器对组件本身进行样式设置 //从外部定义在组件本身的样式优先于使用:host在Shadow DOM中定义的样式 style.textContent = '.disabled {opacity: 0.4;}' + 'h1 { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'+ ':host {--background-color: #1387ff;}'+ '#container {background-color: var(--background-color);}'; } //当这个元素被插入DOM树的时候将会触发这个方法 //在connectedCallback之后进行元素的设置 //这是唯一可以确定所有的属性和子元素都已经可用的办法，如document.body.appendChild connectedCallback() { } //当元素从DOM中移除的时候将会调用它 //在用户关闭浏览器或者浏览器tab的时候，不会调用这个方法 disconnectCallback() { } //当元素通过调用document.adoptNode(element)被采用到文档时将会被调用 adoptedCallback() { } //每当将属性添加到observedAttributes的数组中时，就会调用这个函数 //这个方法调用时两个参数分别为旧值和新值 //这个方法只有当被保存在observedAttributes数组的属性改变时,才会调用，其他属性改变则不会 //web组件上的属性主要用来初始化配置,状态 //当组件被插入DOM时，这些配置需要可以被访问了 attributeChangedCallback(attr,oldVal,newVal) { if(attr === 'disabled') { if(this.disabled) { this.container.classList.add('disabled'); } else { this.container.classList.remove('disabled') } } } }) //调用customElements.get(‘my-element’)来获取这个元素构造函数的引用 const el = customElements.get('my-element'); //使用new element()来代替document.createElement()去实例一个元素 const myElement = new el(); //使用customElement.whenDefined升级元素时，可以调用回调，并会返回一个promise customElements.whenDefined('my-element') .then(() => { // my-element is now defined })
- 在浏览器中开启shadow dom
