原生html自定义组件如何实现?

Question

之前在网上找过, 但是找不到自己想要的解决方案

class Hello extends HTMLElement {
    constructor() {
        ...
    }
    template() {
        return `
            <style>
                    h1{
                    color: red;
                    }
            </style>

            <h1>组件元素</h1>
        `;
    }
}
customElements.define('hello-component', Hello);

需求是调用者来规定组件的内容, 定义者做颜色的更改
这种方法将内容写死在定义里了, 显然不行

Answer 1

原则说来，这里需要用 Web Components。不过如果你只是要改变颜色，用 css 就足够了。

hello-component {
  color: red;
}