來源 |?http://www.ruanyifeng.com/blog/2019/08/web_components.html組件是前端的發展方向，現在流行的React和Vue都是組件框架。谷歌公司由于掌握了Chrome瀏覽器，一直在推動瀏覽器的原生組件，即Web組件API。部分第三方框架，原生組件簡單直接，符合直覺，不用加載任何外部模塊，代碼量小。因此，它還在不斷發展，但已經可用于生產環境。Web組件API內容很多，這里不是全面的教程，只是一個簡單的演示，讓大家看一下怎么用它開發組件。

1、自定義元素

下圖是一個用戶卡片。本文演示如何把這個卡片，寫成Web Components組件，這里是最后的完整代碼。網頁只要插入以下的代碼，就會顯示用戶卡片。這種自定義的HTML標簽，稱為自定義元素(custom element)。根據規范，自定義元素的名稱必須包含連詞線，用與區別原生的HTML元素。所以，不能寫成。

2、customElements.define()

自定義元素需要使用JavaScript定義一個類，所有都會是這個類的實例。class UserCard extends HTMLElement {constructor() {super(); }}上面代碼中，UserCard就是自定義元素的類。注意，這個類的父類是HTMLElement，因此繼承了HTML元素的特性。接著，使用瀏覽器原生的customElements.define()方法，告訴瀏覽器元素與這個類關聯。window.customElements.define('user-card', UserCard);

3、自定義元素的內容

自定義元素目前還是空的，下面在類里面稱為這個元素的內容。class UserCard extends HTMLElement {constructor() {super();var image = document.createElement('img'); image.src = 'https://semantic-ui.com/images/avatar2/large/kristy.png'; image.classList.add('image');var container = document.createElement('div'); container.classList.add('container');var name = document.createElement('p'); name.classList.add('name'); name.innerText = 'User Name';var email = document.createElement('p'); email.classList.add('email'); email.innerText = 'yourmail@some-email.com';var button = document.createElement('button'); button.classList.add('button'); button.innerText = 'Follow'; container.append(name, email, button);this.append(image, container); }}上面的代碼最后一行，this.append()的this表示自定義元素實例。完成這一步以后，自定義元素內部的DOM結構就已經生成了。

4、標簽

使用JavaScript寫上一級的DOM結構很麻煩，Web Components API提供了標簽，可以在它里面使用HTML定義的DOM。

User Name

yourmail@some-email.com

Follow然后，改寫一下自定義元素的類，為自定義元素加載。class UserCard extends HTMLElement {constructor() {super();var templateElem = document.getElementById('userCardTemplate');var content = templateElem.content.cloneNode(true);this.appendChild(content); }} 上面的代碼中，獲取上游以后，克隆了它的所有子元素，這是因為可能有多個自定義元素的實例，這個模板還要留給其他實例使用，所以不能直接移動它的子元素。到這一步為止，完整的代碼如下。...class UserCard extends HTMLElement {constructor() {super();var templateElem = document.getElementById('userCardTemplate');var content = templateElem.content.cloneNode(true);this.appendChild(content); } }window.customElements.define('user-card', UserCard);

5、添加樣式

自定義元素還沒有樣式，可以給它指定細分樣式，類似下面這樣。user-card {/* ... */}但是，組件的樣式應該與代碼封裝在一起，只對自定義元素實施，不影響外部的布局樣式。所以，可以把樣式寫在里面。:host {display: flex;align-items: center;width: 450px;height: 180px;background-color: #d4d4d4;border: 1px solid #d5d5d5;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);border-radius: 3px;overflow: hidden;padding: 10px;box-sizing: border-box;font-family: 'Poppins', sans-serif; }.image {flex: 0 0 auto;width: 160px;height: 160px;vertical-align: middle;border-radius: 5px; }.container {box-sizing: border-box;padding: 20px;height: 160px; }.container > .name {font-size: 20px;font-weight: 600;line-height: 1;margin: 0;margin-bottom: 5px; }.container > .email {font-size: 12px;opacity: 0.75;line-height: 1;margin: 0;margin-bottom: 15px; }.container > .button {padding: 10px 25px;font-size: 12px;border-radius: 5px;text-transform: uppercase; }

User Name

yourmail@some-email.com

Follow上方代碼中，樣式里面的:host偽類，指代自定義元素本身。

6、自定義元素的參數

內容現在是在里面設定的，為了方便使用，把它改成參數。image="https://semantic-ui.com/images/avatar2/large/kristy.png"name="User Name"email="yourmail@some-email.com">代碼也相應改造。Follow John最后，改一下類的代碼，把參數加到自定義元素里面。class UserCard extends HTMLElement {constructor() {super();var templateElem = document.getElementById('userCardTemplate');var content = templateElem.content.cloneNode(true); content.querySelector('img').setAttribute('src', this.getAttribute('image')); content.querySelector('.container>.name').innerText = this.getAttribute('name'); content.querySelector('.container>.email').innerText = this.getAttribute('email');this.appendChild(content); }}window.customElements.define('user-card', UserCard);

7、影子DOM

我們不希望用戶能夠看到的內部代碼，Web組件允許內部代碼隱藏起來，這叫做Shadow DOM，即這部分DOM默認與外部DOM隔離，內部任何代碼都無法影響外部。自定義元素的this.attachShadow()方法開啟Shadow DOM，詳見下面的代碼。class UserCard extends HTMLElement {constructor() {super();var shadow = this.attachShadow( { mode: 'closed' } );var templateElem = document.getElementById('userCardTemplate');var content = templateElem.content.cloneNode(true); content.querySelector('img').setAttribute('src', this.getAttribute('image')); content.querySelector('.container>.name').innerText = this.getAttribute('name'); content.querySelector('.container>.email').innerText = this.getAttribute('email'); shadow.appendChild(content); }}window.customElements.define('user-card', UserCard);上面的代碼中，this.attachShadow()方法的參數{ mode: 'closed' }，表示Shadow DOM是封閉的，永久外部訪問。至此，這個Web組件組件就完成了，完整代碼可以訪問這里。可以看到，整個過程還是很簡單的，不像第三方框架那樣有復雜的API。

8、組件的擴展

在前面的基礎上，可以對組件進行擴展。(1)與用戶互動用戶卡片是一個靜態組件，如果要與用戶互動，也很簡單，就是在類里面監聽各種事件。this.$button = shadow.querySelector('button');this.$button.addEventListener('click', () => {// do something});(2)組件的封裝上面的例子中，與網頁代碼放在一起，可以其實用腳本把注入|網頁。這樣的話，JavaScript的跟腳本就能封裝一個分類中翻譯JS文件，成為獨立的組件文件。網頁只要加載這個腳本，使用就能組件。這里就不展開了，更多Web Components的高級用法，可以接著學習下面兩篇文章。

• Web組件初學者教程
• 自定義元素v1：可重用的Web組件

九，參考鏈接

• Web組件剖析，Uday Hiwarale

(完)

總結

以上是生活随笔為你收集整理的webcomponents安装了没有用_Web Components 入门实例教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。