JavaScript

Question

我有一个 Web 组件，它仅在设置了某些属性时才起作用，当我使用 Document.createElement() 创建组件时，我无法传递属性，然后我的组件发生错误。

是否可以通过创建组件的实例 class 或类似的东西来创建组件并能够将参数传递给它的构造函数？

customElements.define('x-card', class extends HTMLDivElement {
//...
}, { extends: 'div' });

Answer 1

您可以使用 new WCard 创建一个新实例。不过，这需要访问 class。

请注意，自定义元素名称最好不要以 x- 开头。

所以更改您的代码：

export class WCard extends HTMLDivElement {
//...
}

customElements.define('w-card', WCard, { extends: 'div' });

window.WCard = WCard;

这允许您在 class 全局调用 new，或者如果您的代码导入 class.

const wcard = new WCard(...args);

JavaScript - 使用 Web 组件创建元素 class