javascript - 如何从我的组件的 ShadowDOM 元素中获取属性

Question

如何获取 ShadowDOM 中输入元素的“已检查”属性值。

class BitBoxComponent extends HTMLElement {
  static get observedAttributes() {
    return ["checked"];
  }

  constructor() {
    super();
    this.inputElem = document.createElement("INPUT");
    this.inputElem.setAttribute("type", "checkbox");
    this.inputElem.setAttribute("checked", false);

    //    this.inputElem.style.border = "solid 1px grey";

    const style = document.createElement("style");
    style.textContent = ``;

    const shadow = this.attachShadow({
      mode: "open"
    });
    shadow.appendChild(style);
    shadow.appendChild(this.inputElem);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) return;
    var isTrueSet = newValue == "true";
    this.inputElem.checked = isTrueSet;

  }
}

customElements.define("bit-box", BitBoxComponent);

document.addEventListener('DOMContentLoaded', () => {
  const bit = document.getElementById("bit-7").getAttribute("checked");
  console.log(bit);
})

<bit-box id="bit-7"></bit-box>
<bit-box id="bit-6"></bit-box>
<bit-box id="bit-0"></bit-box>
<!--    https://github.com/mateusortiz/webcomponents-the-right-way -->

单击复选框后，“已选中”属性的值应更改。然后我想获得使用它的价值。

标签： javascripthtml

Answer 1

首先，当您使用时，mode: 'open'无需存储引用 - 它自动在this.shadowRoot（也从外部）可用。

接下来，创建一个 getter 和 setter for checked，它们checked的行为就像一个真正的布尔属性：

class BitBoxComponent extends HTMLElement {
  constructor() {
    super();
    this.inputElem = document.createElement("INPUT");
    this.inputElem.type = "checkbox";
    this.inputElem.checked = false;
    this.inputElem.addEventListener('change', () => {
      this.checked = this.inputElem.checked;
    })

    this.attachShadow({
      mode: "open"
    });
    this.shadowRoot.appendChild(this.inputElem);
  }

  static get observedAttributes() {
    return ["checked"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) return;
    if (oldValue === null) { // attribute was added
      this.inputElem.checked = true;
    } else if (newValue === null) { // attribute was removed
      this.inputElem.checked = false;
    }
    const event = new CustomEvent('bit-box-change', {
      detail: {
        checked: this.checked
      }
    });
    this.dispatchEvent(event);
  }

  get checked() {
    return this.inputElem.checked;
  }

  set checked(bool) {
    if (bool) {
      this.setAttribute('checked', '');
    } else {
      this.removeAttribute('checked')
    }
  }
}

customElements.define("bit-box", BitBoxComponent);

document.querySelectorAll('bit-box').forEach(box => 
  box.addEventListener('bit-box-change', (event) => {
    console.log(event.detail.checked);
  })
);

<bit-box id="bit-7"></bit-box>
<bit-box id="bit-6"></bit-box>
<bit-box id="bit-0"></bit-box>
<!--    https://github.com/mateusortiz/webcomponents-the-right-way -->

属性如何工作：布尔属性如checked, disabled，hidden工作方式如下：value属性的实际值是无关紧要的。属性存在表示，true不存在表示假。

另请注意，在常规复选框上，该属性checked仅反映复选框的初始状态。当它改变时，这不会反映到属性上！您真正感兴趣的不是checked 属性，而是checked 属性。