Question

我正在创建一个小型SPA框架，我决定整合web组件。一切都很好，但我只是好奇一件事。

我用方法add扩展了HTML元素和HTML元素片段（注意它可能不完美，它仍在开发中）

DocumentFragment.prototype.add = function(options){
  let element = document.createElement(options.elementType);
  if (options.innerHTML){
    element.innerHTML = options.innerHTML;
  }
  if (options.id){
    element.id = options.id;
  }
  if (options.attributes){
    for (let attr in options.attributes){
      element.setAttribute(attr, options.attributes[attr]);
    }
  }
  if (options.insertBefore){
    this.insertBefore(element, options.insertBefore);
    return element;
  }
  this.appendChild(element);
  return element;
}
Element.prototype.add = DocumentFragment.prototype.add;

现在，在我看来，我想使用这样的方法：

root.add({
  elementType: "test-component",
  attributes: {
    attr1: "value",
    attr2: "26.1.2016",
    attr3: "value"
  }

它有效，但问题是，在为此组件设置属性之前，createdCallback被触发，我无法在createdCallback中访问这些属性。

现在，我正在使用attributeChangedCallback来解决这个问题，但它显然不是最好的解决方案

attributeChangedCallback(attrName, oldVal, newVal) {
      if (attrName == "attr1"){
        *do something*
      }
      if (attrName == "attr2"){
        *do something*
      } ...
    }

有没有更好的方法来解决这个问题？通过使用类似

之类的东西扩展父元素的innerHTML来避免“添加”方法

<test-component attr1="value"></test-component>

不是很有帮助，因为这个小“添加”方法简化了我的工作。

每个答案都很有意思。感谢

Answer 1

每当元素被创建时，CreatedCallback就会被触发（明显）。当您以声明方式使用自定义元素时，这非常有用，即不使用js将其附加到DOM中。

对于您的用例，CreatedCallback在您执行document.createElement后就会被解雇，因为您正在执行setAttribute帖子，因为createdCallback方法无法访问这些帖子。

在此处使用attributeChangedCallback是有效的替代方案。如果您想考虑另一个，可以使用attachedCallback，只要您将节点附加到DOM，即在其上执行appendChild，就会执行CreateProcess()。如果您还没有，请查看此article。

在创建Web组件属性时设置它们

1 个答案: