[Day02] - 旅途开始前的行前解说

昨天提到了 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 定义