javascript - 如何在javascript中创建一个元素并向其传递参数？

Question

在新的 v1 Web 组件规范中，您可以通过这样的方式创建一个新元素

class gg extends HTMLElement {
    constructor(a) {
        super();
    }
}

customElements.define('gg-gg', gg);

然后你可以创建它的一个新实例，方法如下

<gg-gg></gg-gg>

或

new gg(1);

甚至

document.createElement("gg-gg");

但在最后一种方式 document.createElement("gg-gg") 中，如何将参数传递给构造函数中的 a 呢？

Answer 1

您可以使用函数创建 class 表达式，其中使用默认参数来设置构造函数

const gcreate = (...props) => {
  const gg = class extends HTMLElement {
    constructor(a = props) {
      console.log(a);
      a.find(prop => 
        typeof prop === "object"
        && !Array.isArray(prop))
        ["def"](789)
      super();
    }
  }
  customElements.define('gg-gg', gg);
  return document.createElement("gg-gg");
}

let g = gcreate(
        // pass parameters
        "abc"
        , 123
        , [4,5,6]
        , {def:(prop) => console.log(prop)}
        , null, void 0
        );