昨天提到了 Web Component , 今天先初步了解一下什麼是 WebComponent 跟他能做什麼吧 !

WebComponent 簡介

WebComponent 究竟有什麼特性呢 ?

這時我們可以先看一下 , 現成的 WebComponent - Wired Elements

在我們的 Web 中需要如何引用 ?

步驟一 > 將 Wired Elements 的 JS 檔在 Html 中引用

<script type="module" src="https://unpkg.com/wired-elements?module"></script>

步驟二 > 在我們的頁面中使用 wired-input . wired-button ...等 , 特別的 Html Tag 使用 Wired Elements 定義好的元件

<h3>Enter Your Nick Name：</h3>
<div>
  <wired-input placeholder="Enter name"></wired-input>
  <wired-button>確定</wired-button>
</div>
<button>進入遊戲</button>

這時我們可以觀察到 WebComponent 的第一個特性 : Custom Html Tag

在頁面中 , 我們多加設定 button 的 styling ,

<style>
button {
      background-color: #15aacb;
      border-radius: 4px;
      padding: 10px 25px;
      color: white;
      margin: 8px;
    }
</style>

我們可以觀察到 , 這並不會影響到 wired-button 這個元件的樣式

元件內外的樣式定義是分開的 , 這就是 WebComponent 的第二個特性 : Shadow Dom

這可以避免一些定義 button 樣式時 , 互相干擾的一些麻煩事

有時 , 我們需要在我們定義的 Html Tag 中使用到原生的 Html Tag

我們只需要將其放到我們的元件中即可

<wired-card elevation="4" fill="darkred" style="color: lightyellow;" class="wired-rendered">
<h4>Colored Card</h4>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</wired-card>

這就是 WebComponent 的第三個特性 : Slot

成果圖

如果想查看實際頁面 , 請到 import-wired-element.html 查看

下方整理一下 , 今天討論到的 WebComponent 三特性

上述這些 , 不知道學過 Vue 的邦友們有沒有種很熟悉的感覺 ?

聽說 Vue 的作者在製作 Vue 時 , 有參考那時的 WebComponent 定義去製作 Vue 的

參考資料 :

• Udemy 課程 - Web Components & Stencil.js - Build Custom HTML Elements
• webcomponents 官方網站
• MDN - webcomponents 介紹
• wired-button 的 JS 定義