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表达式，其中默认参数用于设置constructor

＆＃13;

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
        );

＆＃13;

Answer 2

您可以将options对象的第二个参数传递给document.createElement()，其中属性设置为"is"，contructor内使用setTimeout()来电.getAttribute() } on variable identifier引用super()以获取"is" property

的值

＆＃13;

class gg extends HTMLElement {
    constructor(a) {
        const curr = super();
        setTimeout((el) => {
          console.log(JSON.parse(el.getAttribute("is")))
        }, 0, curr)
    } 
}

customElements.define('gg-gg', gg);

const g = document.createElement("gg-gg", {"is":JSON.stringify({"abc":123})});

＆＃13;

Answer 3

这是您可以将参数加载到构造函数中的另一种方法。它通过加载临时负载来工作。

// Args
var args;

// Create Element
var createElem = function (element, arguments) {
  typeof arguments === 'undefined' ? args = {} : args = arguments;
  return document.createElement('gg-gg');
}

// Define Custom Component
customElements.define('gg-gg', class extends HTMLElement {
  constructor() {
    super();
    console.log(args);
  }
});

// Arguments
createElem('gg-gg', {
  width: 500,
  height: 500,
});

// No arguments
createElem('gg-gg');

如何在javascript中创建一个元素并将参数传递给它？

3 个答案: