本文緣由：最近在學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);
 

正常情況下你會看到下面效果，即自定義元素的文字內容被替換了：