隨著網頁元件和 Polymer 等支援程式庫的普及，自訂元素成為建構 UI 功能的絕佳方式。自訂元素的預設封裝功能，特別適合用於建立獨立的小工具。
雖然部分小工具是獨立的，但許多小工具都需要依賴外部資料，才能向使用者呈現內容，例如天氣小工具的目前預報，或是地圖小工具的公司地址。
在 Polymer 中，自訂元素屬於宣告式元素，因此將自訂元素匯入專案後，便很容易在 HTML 中加入及設定這些元素 (例如傳送資料，透過屬性填入小工具)。
我們希望能夠避免重複，並確保資料一致，方法是重複使用相同的程式碼片段填入不同的小工具，以及向搜尋引擎和其他消費者提供網頁內容相關資訊。我們可以使用 schema.org 標準和 JSON-LD 格式來處理資料。
使用結構化資料填入元件
一般來說，JSON 是將資料插入特定小工具的方便方法。隨著 JSON-LD 的支援度日益提升，我們可以重複使用相同的資料結構，向 UI 提供資訊，並向搜尋引擎和其他結構化資料使用者說明網頁內容的確切含義。
結合網頁元件和 JSON-LD，我們可為應用程式建立明確的架構：
- schema.org 和 JSON-LD 代表資料層，其中 schema.org 提供資料詞彙，而 JSON-LD 則構成資料的格式和傳輸方式。
- 自訂元素代表呈現層，可進行設定，且與資料本身分開。
範例
請參考以下範例：一個列出幾個 Google 辦公室地點的網頁： https://github.com/googlearchive/structured-data-web-components/tree/master/demo
這個頁面包含兩個小工具：地圖 (每個辦公室都有一個圖釘) 和下拉式選單 (列出各個地點)。請注意，這兩種小工具所呈現的資料必須相同，且搜尋引擎可解讀該網頁。
在這個示範中，我們使用 LocalBusiness 實體來表達資料的含義，也就是部分 Google 辦公室的地理位置。
如要查看 Google 如何讀取這個網頁及建立索引，最好的方法就是全新的改良版結構化資料測試工具。在「擷取網址」部分中提交示範網址，然後點選「擷取並驗證」。右側的部分會顯示從網頁擷取的剖析資料，以及可能發生的任何錯誤。這是檢查 JSON-LD 標記是否正確且可供 Google 處理的方便方法。
如要進一步瞭解這項工具，以及這項工具改善了哪些功能，請參閱網站管理員中心的網誌文章。
將元件連結至結構化資料來源
您可以在 GitHub 上找到這項示範和用於建構示範的網頁元件程式碼。讓我們看看 combined-demo.html 頁面的原始碼。
首先，我們會使用 JSON-LD 指令碼將資料嵌入網頁中：
<script type="application/ld+json">
{...}
</script>
這樣一來，我們就能確保支援 schema.org 標準和 JSON-LD 格式的其他使用者 (例如搜尋引擎) 能輕鬆存取資料。
在第二步中，我們使用兩個網頁元件來顯示資料：
- address-dropdown-jsonld：這個元素會建立下拉式選單，並在「jsonld」屬性中傳遞所有位置。
- google-map-jsonld：這個元素會建立 Google 地圖，並為「jsonld」屬性中傳遞的每個位置加上圖釘。
為此，我們使用 HTML 匯入功能將這些圖片匯入網頁。
<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">
匯入後，我們就可以在網頁上使用這些圖片：
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
最後，將 JSON-LD 資料與元素結合在一起。我們會在聚合器式回呼中執行這項作業 (這是元件可用時觸發的事件)。由於元素可透過屬性設定，因此只要將 JSON-LD 資料指派給元件的適當屬性即可：
document.addEventListener('polymer-ready', function() {
var jsonld = JSON.parse(
document.querySelector(
'script[type="application/ld+json"]').innerText);
document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
});
JSON-LD：JSON 的強大兄弟
您應該已註意到，這與使用純粹的舊版 JSON 傳遞資料非常類似。但是，JSON-LD 有一些優點，是直接衍生自 schema.org 相容性：
- 系統會根據 schema.org 標準，以清楚的方式呈現資料。使用 JSON-LD 的網頁元件，您就能透過這些技術提供有意義且一致的輸入內容。
- 搜尋引擎可以有效使用這些資料，進而改善網頁的索引作業，並可能在搜尋結果中顯示複合式搜尋摘要。
- 如果您以這種方式編寫網頁元件，就不需要為元件預期的資料學習或設計新結構 (和說明文件)，因為 schema.org 已經為您完成所有繁重的工作，並建立共識。也能更輕鬆地建構相容元件的完整生態系統。
總而言之，JSON-LD 和 schema.org 也結合網路元件技術，可構成可供開發人員和搜尋引擎檢索的可重複使用及封裝的使用者介面。
建立專屬元件
您可以試試GitHub 上的範例，或參閱 Polymer 的建立可重複使用元件指南，開始編寫自己的元件。請參閱 developers.google.com 上的結構化資料說明文件，瞭解可用 JSON-LD 標記的各種實體。
歡迎在 @polymer 上向我們炫耀您建立的自訂元素！