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

正常情况下你会看到下面效果，即自定义元素的文本内容被替换了：

PS: 本人博客www.yemaoteng.com