今日目標: 動手打造自己專屬的HTML標籤

[線上執行範例] [程式碼]

google-map-x3 這HTML標籤可以同時顯示三個不同地圖面貌，分別街道+衛星圖、街道圖、衛星圖 三種方式，使用者操作其中一個地圖都將同步定位顯示到另外兩個地圖。

蠻有趣的，不過想不到什麼情況會用到，純粹拿來當包元件練功吧~XD

HTML標籤

<google-map-x3 latitude="22.605153" longitude="120.301125">
</google-map-x3>

一、使用方式

在html裡面載入platform.js，就可以使用WebComponent。

用 link rel="import" 方式載入 google-map-x3.html 這個元件

使用 <google-map-x3 /> 這個標簽

   <script src="bower_components/platform/platform.js"></script>
   <link rel="import"href="elements/google-map-x3.html">
 

 
   <h1>Google Map三重奏</h1>

   <google-map-x3 latitude="22.605153" longitude="120.301125">
   </google-map-x3>
 

二、了解Polymer元件包裝方式

首先建立一個html檔案，通常該html檔案的名稱就是標籤的名稱。例如今天練功的元件叫做 <google-map-x3> ，所以html檔案的名稱就是 google-map-x3.html，也就是說寫一個元件基本上就是寫一個html檔案

google-map-x3.html 內容結構如下

<link rel='import' ...>  ← 用來載入其他元件

<polymer-element> ← 包裝元件的根結點

 <template>  ← 將取代自定標籤位置放到DOM (Shadow DOM)

   .

   .

   .

 </template>

 <script>

    Polymer('google-map-x3', { ...} ); ← 實作元件的方法與屬性

 </script>

</polymer-element>

<link rel='import' ...> ← 用來載入其他元件

每個自定元件，最少最少都要用link引入 polymer.html 這個最基本的元件，為什麼呢? 看看Polymer原始碼就清楚了 (第10,12行)

原來就是載入 layout.html 用來提供網頁佈局的功能、以及載入 polymer.js ，polymer.js 是什麼? 所以官網那張圖又可以派上用場了

如果自定的元件需要載入javascript的話，也可以直接用 <script src=..>引入使用。

<polymer-element> ← 包裝元件的根結點

一個自定元件的html檔案通常只放一個元件，也就是只會看到一個<polymer-element>標籤，元件就是用 <polymer-element> 標籤來定義。不過html檔案裡面也能同時有多個元件，如果元件有相依性，或許就可以考慮放在一起，那麼一個自定元件的html檔案就會有多個 <polymer-element>標籤。

<template> ← 將取代自定標籤位置放到DOM (Shadow DOM)

在<template>標籤內的html語法，就是將來這自定元件的畫面長相，在真正使用的runtime時，polymer會將自定標籤轉成用template裡面的html代替，並且插入到DOM中自定標籤的肚子裡。不過如果只是這樣，那自定元件所定義的css，不就會影響到使用元件本身的網頁了嗎?

WebComponent的強大，就在於從瀏覽器原生支援方式來實作，所以可以實現完全封裝，這個封裝的方式就叫做 ShadowDOM，我們來看看使用這元件時，HTML DOM的長相

然後補充一下，Polymer的強大，就在於瀏覽器如果還沒支援ShadowDOM，會自動透過platform.js把這問題處理掉。前幾個月Apple將Safari原本支援ShadowDOM拿掉，在HackerNew會引起軒然大波，甚至還有暗黑說法這是因為Apple報復Google Chrome後來不用WebKit，改推出了Blink核心的反擊。哈，離題了，回來看看Shadow DOM，借W3C ShadowDOM的圖來說明一下

Shadom很值得之後找一天好好介紹一下，這裡我們先繼續今天的實戰

<script>

   Polymer('google-map-x3', { ...} ); ← 實作元件的方法與屬性

</script>

呼叫Polymer方法，第一個傳入參數定義目前的元件標籤名字，為了和目前既有的HTML標簽有所區隔，規定自定標籤一定要加上 - 這符號，第二個傳入參數則是定義此元件的方法及屬性。

接下來說明元件完整程式碼

<待續...>

附註

Polymer包裝的元件有很多種說法，例如 WebComponent、Custom Element、HTML標籤、自訂元件在這裡都是指相同的東西