自定义元素customElements

// 自定义元素
<template id="x-foo-tpl">
   <p>I'm inside a custom element template!</p>
</template>

const template = document.querySelector('#x-foo-tpl');

class FooElement extends HTMLElement {
    constructor() {
        super();
        // this 引用Web 组件节点
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.appendChild(template.content.cloneNode(true))
  }
}
customElements.define('x-foo', FooElement);
document.body.innerHTML += `<x-foo></x-foo>`;