web component
最近忙著用業餘時間搞一個 web 應用開發框架，所以蒐集資料，今天給大家分享一個 web component。
<zi-logo>
<img src="zidealogo.jpg"/>
</zi-logo>
<script>
class ZiLogo extends HTMLElement{
constructor(){
super();
console.log("hello from logo")
}
}
customElements.define('zi-logo',ZiLogo)
</script>
showRoot
showRoot 會給我們提供一個封閉不收干擾空間，想一想我們沒有模組沒有作用域 css 吧，有了 showRoot 了我們就相當於為 css 做了一個作用域，可以說我們的地盤我做主。
001.JPG
我們可以開啟 chrome 的 dev 工具，可以看出。
002.JPG
不過我們發現了我們的 image 不見了，這是因為什麼呢，我想了想通過一個實際的例子給大家解釋一下，就是我們的 canvas 標籤，在這個標籤裡的 p 標籤內容是無法檢視。
<canvas> <p>不顯示</p> </canvas>
要顯示 image 我們需要在自定義標籤內新增一個 slot ，那麼我們就定義一個 slot 標籤，我們先建立一個 template，createElement 接受引數像 div、p 和 template 了。還有 attachShadow 接受一個物件，其中 mode 賦值為 open。
const template = document.createElement('template');
template.innerHTML = "<slot />";
class ZiLogo extends HTMLElement{
constructor(){
super();
console.log("hello from logo")
this.attachShadow({
mode:'open',
})
}
}
當元件新增到body上後會觸發 connectedCallback 回撥函式，然後在自定義元件新增到後，我們就將模板新增到我們自定義上
我們這個模板的可能被複用，所以在將模板傳入到 shadowRoot 中時候我們需要複製一個而不是直接使用。
connectedCallback(){
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
我們通過 querySelector 在 shadowRoot 中查詢到 slot 元素，但是是無法查詢到 image 節點的。
connectedCallback(){
this.shadowRoot.appendChild(template.content.cloneNode(true))
const slot = this.shadowRoot.querySelector('slot');
console.log(slot)
const img = slot.querySelector('img');
console.log(img) // null
}
我們想給 image 新增動畫，也不必直接給 image 新增動畫，我們可以給我們元件新增一個動畫，那麼就呼叫 this.animate 來實現動畫。
this.animate([
{ transform: 'scale(0)' },
{ transform: 'scale(1)' }
],{
duration:1000
})
沒有效果這是因為我們還差一步，我們給我們自定義元件新增一個樣式，這個樣式僅限自定義元件的最頂層的樣式。
template.innerHTML = `<style>:host {display: inline-block }</style><slot />`;
003.JPG
我們給圖片再新增一個旋轉的效果，然後給動畫新增動畫節奏的引數 easing。
我們可以動畫新增一個 easing 效果，怎麼解釋 easing 就是將我們動畫節奏改變一下，可能是先快後慢，要理解 bezier 曲線我們需要學習一些數學知識。
this.animate([
{ transform: 'scale(0) rotate(0deg)' },
{ transform: 'scale(1) rotate(1080deg)' }
],{
duration:1000,
easing: 'cubic-bezier(0,0,0.3,1)'
})