網站建設

Web組件目前正興奮地被稱為即將到來的“ 網絡開發的構造轉變 ”，承諾永久地重塑網頁設計前景。大型企業正在向前發展，將網絡組件變為現實。Google和Mozilla都已逐步推出原生瀏覽器支持。

你問的網頁組件是什么？杭州網站設計簡而言之，Web組件為您提供了一種創建自己的自定義HTML元素的方法，這些元素可以執行您需要的任何內容。您可以將所有內容整理成漂亮，整潔的小型自定義HTML元素，而不是使用詳細標記，長腳本和重復代碼來加載您的網站。

了解Web組件

了解Web組件如何允許自定義HTML元素的最簡單方法是首先查看我們已經從HTML5中了解的現有元素：<video>標記。使用此元素，您只需幾行代碼即可放置視頻，例如：

您可能只看到上面的幾行HTML，但這里是<video>元素在幕后的真實情況：

默認情況下，瀏覽器隱藏所有詳細的代碼，因此您不需要查看它或擔心在您想要放置視頻時編寫它。你只重擊在你<video>和<source>標簽，你是啟動和運行。 

以前，只有瀏覽器供應商才能以這種方式創建元素。但想象一下，如果您可以將自己的相同方法用于其他類型的內容嗎？ 

以圖片幻燈片為例。通常，您需要幾輪帶有特定類名稱的嵌套div來處理幻燈片包裝，包裝每張幻燈片以及添加標題和縮略圖。您還需要通過一些內聯jQuery / JavaScript為幻燈片轉換效果設置任何整體幻燈片選項。

如果你可以跳過所有這些而只是使用：

使用Web組件，這正是您可以做的。 

創建自己的HTML元素

如果您想提供一種簡潔，易于與放置內容的方法進行交互，否則這些內容會變得臃腫和笨拙，您可以繼續創建自己的Web組件。

Web組件也可以輕松共享，因此當開發人員加入時，您可以輕松獲取最常見項目要求的預構建Web組件。我們已經看到自由共享的組件從   語音識別中彈出來。 

以  展示建設者 ..

讓我們來看看Web組件幕后的內容。

是什么使Web組件

目前存在的Web組件由四部分組成：

• 自定義元素

• 影子DOM

• 模板

• HTML導入

自定義元素

自定義元素正是它們聽起來的樣子：可以命名為您選擇的任何元素，并以您想要的任何方式操作。當我以任何方式說什么時，我的意思是。例如，我提出了<x-gangnam-style>元素：

自定義元素以最簡單的形式聲明，如下所示：

創建自定義元素時，可以從頭開始完成，也可以擴展現有的HTML元素（<button>例如），并為其提供所需的修改功能或演示文稿。

注意：值得指出的是，由于并發癥，該<element>標簽在2013年已被棄用。它可能會產生回報，但與此同時還有polyfill選項，我們將在稍后討論。感謝Addy Osmani  指出這一點！

暗影DOM

Shadow DOM實際上是Web組件工作方式的核心方面。之前，我們查看了HTML5 <video> 元素，并展示了盡管只看到幾行代碼，但實際上默認隱藏了相當多的代碼。隱藏代碼所在的地方稱為“Shadow DOM”。

瀏覽器供應商多年來一直使用這個shadow DOM來本地實現輸入，音頻，視頻等元素。通過Web組件，任何開發人員現在都可以使用它。

一般的想法是你在標記放置期間獲取所有不需要看到的代碼，并在Shadow DOM中隱藏它，這樣它就不會妨礙它。這使您只需處理相關信息，例如使用<video>元素時的高度，寬度和源文件位置。

使用Shadow DOM最酷的事情之一就是每個實例都是它自己的小自包含世界。因此，如果您在元素中包含樣式和腳本，則它們不會意外泄漏并影響頁面上的任何其他內容。 

相反，頁面上其他地方的CSS和JavaScript不會影響您的Web組件，除了您可能專門創建的樣式掛鉤以允許外部CSS定位。所有這一切都意味著不再擔心命名空間的ID和類名以避免沖突。

如果你想看看影子DOM的樣子，那很簡單。確保您正在運行Chrome的最新安裝，打開開發工具，單擊齒輪圖標以打開設置，然后選中標記為顯示用戶代理陰影DOM的框：

然后，當您使用shadow DOM檢查任何元素時，您將看到其完整代碼。通過檢查<x-gangnam-style>帶有和不帶有陰影DOM 的元素來試試：http：  //html5-demos.appspot.com/gangnam

對于影子DOM的完整綱要，請查看：  Shadow DOM簡介

模板

我們已經介紹了自定義元素如何只關注相關信息，而所有剩余代碼都在shadow DOM中被隱藏。Web組件中的模板包含剩余代碼的所有表示元素。

作為定義標記<template>...</template>放置的Web組件的代碼的一部分，在這些標記之間包含組件所需的任何HTML和CSS。

例如，查看創建<x-gangnam-style>Web組件的代碼。它的開始<template>標記位于第4行，其結束</template>標記位于第201行。在這些標記之間，您將看到負責創建定位和動畫的所有CSS，以及放置所涉及的每個圖像的HTML。 

HTML導入

HTML導入允許您采用上述所有內容并實際使其在您的頁面上運行。Web組件在外部HTML文件中定義，因此需要導入該文件才能使自定義元素起作用。HTML導入通過<link>標記來處理，您可以通過標記導入外部CSS文件。

例如，在使用<x-gangnam-style>Web組件之前，您必須導入定義它的HTML文件，如下所示：

瀏覽器支持和Polyfill

潛在客戶首先使用它們的想法非常吸引人，但目前瀏覽器支持還不可行。目前的支持狀態如下：

原生支持正在為Chrome，Opera和Firefox實施，但尚未完成。IE和Safari還沒有公布他們的計劃，但是考慮到大多數  瀏覽器最終將支持Web組件，其他瀏覽器可能會效仿。

現在，如果您想開始使用Web組件，則需要使用其中一個可用的polyfill。好消息是兩個最流行的解決方案是由Google和Mozilla創建的，因此我們可以期待看到與本機支持最終運營方式的一致性。

Google的聚合物

很難不傾向于使用Polymer，  因為Chrome現在是使用最廣泛的瀏覽器，您可能會考慮在開發過程中考慮如何將Google組件代碼編入索引。

Polymer附帶了一個完整的預構建Web組件庫。它包括功能導向的“ 聚合物核心元素 ”和面向設計的“ 紙元素”。

使用Polymer創建自定義元素時，而不是使用<element name="...">您使用  的格式  <polymer-element name="...">。

聚合物將自己描述為處于“開發者預覽”狀態，而不是絕對生產就緒，但他們也說 

...盡管標簽很多人已經在生產中使用聚合物取得了成功。

瀏覽器支持

• Chrome Android

• 鉻

• 加納利

• 火狐

• IE 10+

• Safari 6+

• 移動Safari

如果你需要迎合IE9，估計它占據了  1.9％  到  5.11％  的市場份額，不幸的是你對Polymer來說運氣不好。但是，您仍然可以使用Mozilla的X-Tags。

Mozilla的X-Tags

X-Tags是由Mozilla創建的JavaScript庫，目前，它比Polymer更具優勢，因為它的瀏覽器支持范圍更廣。如果這是您的主要考慮因素，X-Tags可能是您的首選。

瀏覽器支持

• Firefox 5+桌面和移動

• Chrome 4+

• Chrome Android 2.1+

• Safari 4+桌面和移動設備

• IE9 +

• Opera 11+桌面和移動設備

IE8支持

現在，如果您需要支持IE8，那么遺憾的是，Web組件可能不適合您，因為可用的polyfill支持IE9 +。估計IE8用戶大約在2.1％  到3.82％之間，但當然如果你自己的統計數據有所不同，那么你必須對你的瀏覽器支持應該延伸多久做出判斷。

Ember.js和AngularJS組件

您可以準備過渡到使用Web組件的一種可能方法是暫時使用Ember.js或AngularJS  。兩者都有自己的組件創建系統，并且都承諾在完全可用時轉換為利用本機Web組件代碼。

結論

杭州網站設計我希望您喜歡閱讀這些Web組件的概述以及您應該關注的原因！還有很多內容可以深入研究，但是考慮到這些基礎知識，我們有很多機會可以獲得有關實際構建自定義Web組件的教程。你怎么看？在什么情況下你會看到自己使用它們？