在使用Web Components之前，我們先看看上一篇文章Web Components簡介，其中提到了相關的接口、屬性和方法。
正是這些接口、屬性和方法才實現了Web Components的主要技術：Custom elements（自定義元素）、Shadow DOM（影子DOM）、HTML templates（HTML模板）。
由於並不是所有的接口以及接口所包含的方法都會被用到，所以我們從實際的案例出發，逐步瞭解Web Components的使用。
需求1：創建一個基礎的組件，包含一個輸入框，和一個button。
mian.js
class SearchInput extends HTMLElement {
constructor() {
super();
// 創建一個 shadow root
let shadow = this.attachShadow({mode: 'open'});
const input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('class', 'input-vlaue');
const button = document.createElement('input');
button.setAttribute('type', 'button');
button.setAttribute('value', 'Search');
// 創建一些 CSS，並應用到 shadow dom上
let style = document.createElement('style');
style.textContent=".input-vlaue{margin:5px; color:red;}";
shadow.append(input);
shadow.append(button);
shadow.append(style);
}
}
// declare var customElements: CustomElementRegistry;
customElements.define('search-input', SearchInput);
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>
<search-input></search-input>
<search-input></search-input>
<search-input></search-input>
</body>
</html>
這樣子，一個input + button的組件就實現了。這裏用到的技術有Custom elements（自定義元素）、Shadow DOM（影子DOM）。
使用Shadow DOM的好處：Shadow DOM 內部的元素始終不會影響到它外部的元素
要注意的是，不是每一種類型的元素都可以附加到shadow root（影子根）下面。出於安全考慮，一些元素不能使用 shadow DOM（例如<a>），以及許多其他的元素。
Element.attachShadow() 方法給指定的元素掛載一個Shadow DOM，並且返回對 ShadowRoot 的引用。具體方法:創建一個ShadowRoot並返回它：
attachShadow(init: ShadowRootInit): ShadowRoot;
attachShadow()的參數是一個對象，裏面包含兩個屬性，mode和delegatesFocus。
mode：可以是open/closed。
- open：shadow root元素可以從js外部訪問根節點
- closed：拒絕從js外部訪問關閉的shadow root節點
delegatesFocus 焦點委託
一個布爾值, 當設置爲 true 時, 指定減輕自定義元素的聚焦性能問題行爲.
當shadow DOM中不可聚焦的部分被點擊時, 讓第一個可聚焦的部分成爲焦點, 並且shadow host（影子主機）將提供所有可用的 :focus 樣式.
使用Custom elements（自定義元素）的好處：語義化，簡單明瞭。
customElements.define('search-input', SearchInput)實現了CustomElementRegistry接口，無返回值:
interface CustomElementRegistry {
define(name: string, constructor: CustomElementConstructor, options?: ElementDefinitionOptions): void;
get(name: string): any;
upgrade(root: Node): void;
whenDefined(name: string): Promise<void>;
}
需求2：可是真正的組件不僅僅有顯示的功能，還需要綁定一些事件，例如上面的例子，點擊瞭如何觸發search事件呢？
核心：element.addEventListener()
代碼示例（index.html不變）：
class SearchInput extends HTMLElement {
constructor() {
super();
// 創建一個 shadow root
let shadow = this.attachShadow({mode: 'open'});
const input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('class', 'input-vlaue');
const button = document.createElement('input');
button.setAttribute('type', 'button');
button.setAttribute('value', 'Search');
const text = document.createElement('p');
// 創建一些 CSS，並應用到 shadow dom上
let style = document.createElement('style');
style.textContent=".input-vlaue{margin:5px; color:red;}";
shadow.append(input);
shadow.append(button);
shadow.append(text);
shadow.append(style);
button.addEventListener('click', e => {
text.textContent = '按鈕被點擊了~'
});
}
}
// declare var customElements: CustomElementRegistry;
customElements.define('search-input', SearchInput);
需求3：我們知道，像react、vue都有組件自身的狀態管理，和利用Props進行數據傳遞，那麼,在web components中是怎麼實現的呢？
核心：this.getAttribute(props)，class內部屬性，生命週期
main.js
class SearchInput extends HTMLElement {
constructor() {
super();
this.state = { count:0 };
// 創建一個 shadow root
let shadow = this.attachShadow({mode: 'open'});
const input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('class', 'input-value');
const button = document.createElement('input');
button.setAttribute('type', 'button');
button.setAttribute('value', 'Search');
const text = document.createElement('p');
// 創建一些 CSS，並應用到 shadow dom上
let style = document.createElement('style');
style.textContent=".input-vlaue{margin:5px; color:red;}";
shadow.append(input);
shadow.append(button);
shadow.append(text);
shadow.append(style);
button.addEventListener('click', e => {
this.state.count++;
text.textContent = `按鈕被點擊了${this.state.count}次。`
});
}
connectedCallback () {
const defaultValue = this.getAttribute('defaultValue');
const input = this.shadowRoot.querySelector('.input-value');
input.value = defaultValue;
}
}
// declare var customElements: CustomElementRegistry;
customElements.define('search-input', SearchInput);
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>
<search-input defaultValue="input1"></search-input>
<search-input defaultValue="input2"></search-input>
<search-input defaultValue="input3"></search-input>
</body>
</html>
到此，我們已經瞭解了利用Web Components創建一個組件，如何觸發組件的事件，如何利用props向組件內部傳遞數據以及組件內部的狀態管理。
目前來看缺乏的就是組件間的通信了，目前還沒發現有類似react、vue的組件間通信的方法，不過我們可以利用localStorage，StorageEvent間接的發生組件間的通信、界面渲染。