在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 = `<p> demo <p>`;
shadow.appendChild(div);
}
}
window.customElements.define('my-demo', MyDemo);
HTML
<body>
<h1>TEST HTML TEMPLATE</h1>
<my-demo></my-demo>
</body>
效果