Question

我尝试使用Web组件（带有验证和服务器通信）创建自己的自定义DOM元素。我正在遵循有关MDN的教程：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

    attributeChangedCallback(name, oldValue, newValue) {
    console.log(newValue);
  }

我可以接收属性的更改。但是，例如，如果我有一个文本框，则值会更改。如何将文本框的值绑定到属性？这甚至是个好方法吗？

这是我的代码：

'use strict';

class PopUpInfo extends HTMLElement {

    static get observedAttributes() {
        return ['value'];
    }
    constructor() {
      // Always call super first in constructor
      super();

      // write element functionality in here

    var shadow = this.attachShadow({mode: 'closed'});
    console.log("Created");
    let tbName = document.createElement("input");
    shadow.appendChild(tbName);
    }
    attributeChangedCallback(name, oldValue, newValue) {
        console.log(newValue);
      }
  }
  customElements.define('popup-info', PopUpInfo);

稍后，我想将多个html控件添加到“ PopUpInfo”。这个名字以后会像“ Controlunit”之类的。

Answer 1

您需要采用属性或属性，并将该值传递到内部DOM中。除非您使用框架，否则没有“绑定”。如果要使用LitElement或其他东西，则可以绑定。我个人认为这些框架会带来大量开销。

但是看这个例子：

class PopUpInfo extends HTMLElement {
  static get observedAttributes() {
    return ['value'];
  }
  constructor() {
    // Always call super first in constructor
    super();

    // write element functionality in here

    var shadow = this.attachShadow({mode: 'open'});
    let textEl = document.createElement("input");
    shadow.appendChild(textEl);
    
    // Set attribute to value of inner element `.value`
    textEl.addEventListener('input', (evt) => {
      this.setAttribute('value', textEl.value);
    });
  }
  
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`attributeChangedCallback(${name}, ${oldValue}, ${newValue})`);
    if (oldValue !== newValue) {
      this.value = newValue;
    }
  }
  
  get value() {
    let textEl = this.shadowRoot.querySelector("input");
    return textEl.value;
  }
        
  set value(newValue) {
    console.log(`set value(${newValue})`);
    let textEl = this.shadowRoot.querySelector("input");
    if (newValue == null) { // check for null and undefined           textEl.value = '';
    }
    else {
      textEl.value = newValue;
    }
  }
}

customElements.define('popup-info', PopUpInfo);

<popup-info value="my info"></popup-info>

首先：由于您仅查看一个属性，因此您的attributeChangedCallback函数仅需要查看oldValue和newValue是否不同。如果它们没有不同，则无事可做。如果它们不同，则使用newValue。

在我的示例中，我将属性的值传递给名为value的属性。

在属性设置器中，我检查该值是null还是undefined（对null（x == null使用双等于）就可以了。 null或undefined，然后将内部value的{{1}}设置为空字符串；如果不是<input>或null，则我们将内部undefined元素的value设置为发送的内容。

属性获取器仅读取内部<input>元素的value并将其返回。

将输入的value属性绑定到属性

1 个答案: