在创建时设置 Web 组件属性

Question

我正在创建一个小型 SPA 框架，我决定集成 webcomponents。一切正常，但我只是对一件事感到好奇。

我用方法 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*
      } ...
    }

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

扩展父元素的内部 HTML 来避免 "add" 方法

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

不是很有帮助，因为这个 "add" 的小方法大大简化了我的工作。

每个答案都非常感谢。谢谢

Answer 1

CreatedCallback 会在您的元素创建时触发（显而易见）。这在您使用自定义元素 'declaratively' 时非常有用，即不使用 js 将其附加到 DOM 中。

对于您的用例，CreatedCallback 会在您执行 document.createElement 时立即触发，并且由于您正在执行 setAttribute post，因此在 [=12 中无法访问这些=]方法。

在这里使用 attributeChangedCallback 是一个有效的替代方法。如果你想考虑另一个，你可以使用 attachedCallback 它会在你将你的节点附加到 DOM 时执行，即在其上执行 appendChild 。看看这个 article 如果你还没有看过。

在创建时设置 Web 组件属性

Setting web-component properties at the time of it's creation

javascript

web-component