HTML中的自定義元素
阿新 • • 發佈:2019-01-24
本文緣由:最近在學Vue,碰到元件部分,發現其與HTML自定義元素非常相似,遂以為Vue的底層是使用了類似HTML自定義元素相同的實現方式。不瞭解底層直接搞上層,是不利於日後的深入學習的。故自己查資料學習了HTML的自定義元素及屬性的實現方法。在學習之後才發現,Vue與HTML的自定義元素不是等價的,Vue的官方文件有寫:
你可能已經注意到 Vue 元件非常類似於自定義元素——它是 Web 元件規範的一部分,這是因為 Vue 的元件語法部分參考了該規範。例如 Vue 元件實現了 Slot API 與 is 特性。但是,還是有幾個關鍵差別:
1. Web 元件規範仍然處於草案階段,並且未被所有瀏覽器原生實現。相比之下,Vue 元件不需要任何 polyfill,並且在所有支援的瀏覽器 (IE9 及更高版本) 之下表現一致。必要時,Vue 元件也可以包裝於原生自定義元素之內。
2. Vue 元件提供了純自定義元素所不具備的一些重要功能,最突出的是跨元件資料流、自定義事件通訊以及構建工具整合。
不過,HTML的自定義元素也是一種很好玩的東西。參考了阮一峰的部落格後,自己寫了個帶註釋的例子。想進一步學習,可以參考谷歌的官方教程。下面是自己的自定義元素例子,程式碼掛在了CodePen。這裡簡單說下:
HTML:
<my-element prop="Custom ElementContent"> Hello </my-element> <!--注意這個“prop”是可以更改的,可以是你自己定義的任何合法的命名,這個屬性有什麼用就看你在JS裡面怎麼定義了-->
CSS:(這個沒有決定性意義,只是為了顯示方便而已)
my-element { display: block; font-size: 36px; color: red; }
JS:
//其實本例的自定義元素,是繼承自HTMLElement的 class MyElement extends HTMLElement { get prop() { return this.getAttribute('prop'); } set prop(val) { this.setAttribute('prop', val); } } //標籤與自定義元素之間的對映(本人才疏學淺,這個是我猜的,如有錯誤請指出) window.customElements.define('my-element', MyElement); //下面一堆程式碼是定義自定義標籤的作用 function customTag(tagName, fn){ Array .from(document.getElementsByTagName(tagName)) .forEach(fn); } function myElementHandler(element) { //關鍵點。定義元素的文字內容=自定義元素的自定義標籤的值 element.textContent = element.prop; } customTag('my-element', myElementHandler);
正常情況下你會看到下面效果,即自定義元素的文字內容被替換了: