自定义元素

<my-element content="Custom Element">
            Hello
        </my-element>

        <script>
            class MyElement extends HTMLElement {//自定义元素的定义可以使用ES6的class语法
                get  content() {
                    return this.getAttribute('content');
                }

                set  content(val) {
                    this.setAttribute('content', val);
                }
            }
            //原生的window.customElements对象的define方法用来定义 Custom Element。该方法接受两个参数，第一个参数是自定义元素的名字，第二个参数是一个 ES6 的class。
            window.customElements.define('my-element', MyElement);

            window.onload=function(){//在页面元素加载完之后，才执行
                function customTag(tagName, fn){//Array.from（[arguments]）；可以将字符串，数组，类数组集合转化为数组
                    Array
                        .from(document.getElementsByTagName(tagName))
                        .forEach(fn);
                }
                function myElementHandler(element) {
                    element.textContent = element.content;
                    // element.innerHTML = '你好，世界';

                }
                customTag('my-element', myElementHandler);
            };
        </script>

参考来自HTML自定义元素
更多用法请参考谷歌的官方教程

• Vue和自定义元素之间的关系
  你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，还是有几个关键差别：

1. Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
2. Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。