2

我尝试使用 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);

稍后，我想在“PopUpInfo”中添加多个 html 控件。该名称稍后将类似于“Controlunit”。

4

1 回答 1

2

您需要获取属性或属性并将该值传递到内部 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只需要看看是否不同。如果它们没有什么不同，那么就没有什么可做的了。如果它们不同，则使用.oldValuenewValuenewValue

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

在属性设置器中，我检查值是否是null或undefined（使用双等号 for null( x == null) 就是这样做的。如果是null，undefined那么我们将value内部元素设置为<input>空字符串。如果不是null，undefined那么我们设置发送进来的任何东西的value内部元素。<input>

属性 getter 只是读取value内部<input>元素的 并返回它。

于 2019-02-22T15:07:00.737 回答