HTML中自定义组件

在HTML也能自定义组件？
可以的，使用 window.customElements.define() 这个接口

MDN - Window.customElements

MDN - Element.attachShadow

用法

class MyDemo extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        const document = shadow.ownerDocument;
        const div = document.createElement('div');
        div.innerHTML = `
 demo 
`;
        shadow.appendChild(div);
    }
}
window.customElements.define('my-demo', MyDemo);

HTML

    
TEST HTML TEMPLATE
    

效果