1

我想用 Shadow DOM 创建一个自定义输入

class TextBox extends HTMLElement {

  constructor() {
    super();
    var shadow = this.attachShadow({ mode: 'open' });

    let textbox = document.createElement("input");
    shadow.appendChild(textbox);
    textbox.addEventListener("change", validate);

    function validate(event) {
      console.log("input can be validated");
    }
  }
  get value() {
    console.log("get");
    let textbox = this.shadowRoot.querySelector("input");
    return textbox.value;
  }
  set value(newValue) {
    console.log("set");
    let textbox = this.shadowRoot.querySelector("input");
    textbox.value = newValue;
  }
}
customElements.define('test-textbox', TextBox);

应该可以通过js改变显示的文本框的值。如果我更改.value文本框的属性，值的设置器不会被调用？我错过了什么吗？

稍后我想通过我的解决方案中的模板包含文本框，并能够通过设置文本框的值textbox.value ="Peter"

4

1 回答 1

0

每次其值更改时，内部<input>字段都会调度事件。input此事件可以在您的组件中捕获，也可以由使用您的组件的代码捕获。

该change事件仅在某些情况下发生，因此该input事件是更好的选择。

下面的代码显示了组件如何侦听input事件，外部代码也是如此。

function validate(event) {
  console.log("input can be validated");
}

class TextBox extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
    <style>
      input {
        width: 300px;
      }
    </style>
    `;
    const textbox = document.createElement("input");
    shadow.appendChild(textbox);
    textbox.addEventListener("input", validate);
    textbox.focus();
  }

  get value() {
    console.log("get");
    let textbox = this.shadowRoot.querySelector("input");
    return textbox.value;
  }
  set value(newValue) {
    console.log("set");
    let textbox = this.shadowRoot.querySelector("input");
    textbox.value = newValue;
  }
}

customElements.define('test-textbox', TextBox);

const el = document.querySelector('test-textbox');
el.addEventListener("input", (evt) => {
  console.log('input event from the outside.');
});
<test-textbox></test-textbox>

于 2019-03-30T02:21:53.550 回答