Why the parent custom element method is overridden?

Question

I creat a custom element named "CursorCell", which extends the HTMLTableCellElement object.

I add an attribute named "value" to this custom element.

After that, I create another custom element named "DateCell", which extends the "CursorCell" custom element. In the "DateCell", I want to extend the "set value" method.

Here is my code:

class CursorCell extends HTMLTableCellElement {
  constructor() {
    super();
    this.textBox = document.createElement("input");
    this.textBox.type = "text";
    this.appendChild(this.textBox);
    $(this).addClass("cursorCell");
    $(this).addClass("borderCell");
  }
  set textContent(t) {
    this.value = t;
  }
  get textContent() {
    return this.textBox.value;
  }
  set value(v) {
    this.textBox.value = v;
  }
  get value() {
    return this.textBox.value;
  }
}
customElements.define('cursorcell-string',
  CursorCell, {
    extends: 'td'
  });
class DateCell extends CursorCell {
  constructor() {
    super();
    $(this).addClass("dateCell");
  }

  set value(v) {
    super.value = v;
    switch (v) {
      case "a":
        this.textBox.className = "aShiftColor";
        break;
      case "b":
        this.textBox.className = "bShiftColor";
        break;
      case "c":
        this.textBox.className = "cShiftColor";
        break;
    }
  }

}
customElements.define('datacell-string',
  DateCell, {
    extends: 'td'
  });
$(document).ready(function() {
  var t = document.createElement("table");
  var row = t.insertRow(t.rows);
  var cell1 = new DateCell();
  row.id = "bb";
  row.appendChild(cell1);
  cell1.textContent = "a";

  document.body.appendChild(t);
  $.each($("tr#bb").children(".cursorCell"),
    function(i, val) {
      console.log(val.value);
    });

});

::selection {
  background: none;
  /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: none;
  /* Gecko Browsers */
}

td input[type="text"] {
  border: none;
  height: 100%;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

td input[type="text"]:focus {
  outline: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

.aShiftColor {
  background-color: #ff99cc;
}

.borderCell {
  border: 1px solid #e0e0e0;
}

.bShiftColor {
  background-color: #ffffcc;
}

.cursorCell {
  margin: 0px;
  width: 25px;
  padding: 0px;
  text-align: center;
  font-size: 17px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

After I extend the "set value" method, the "set value" method working properly, whereas I cannot read the value from the "DateCell.value".

When I remove the "set value" method from "DateCell", I can read the value from the "DateCell.value".

So, why the CursorCell "get value" method is overridden?

Since value is such a prominent property shouldn't have it in the constructor? `this.value = value` — zer00ne, Jun 05 '19 at 03:03
I have added "this.value = value" to the constructor, the result is the same. — The KNVB, Jun 05 '19 at 05:58

Supersharp · Answer 1 · 2019-06-06T07:14:15.493

1

value is a property. For a property, setter and getter are working together.

You don't override the setter or getter, but the property itself.

If you override it with a setter (set value), you'll need to override it with a getter (get value) in the same time. Otherwise the JS engine will consider the getter is undefined.

You should also define the getter in the class extension:

class DateCell extends CursorCell {    
    //...    
    set value(v) { super.value = v }
    get value() { return super.value }
}

edited Jun 06 '19 at 07:14

answered Jun 05 '19 at 17:50

Supersharp

29,002
9
92
134

Although your solution works, such a design would violate the purpose of the inheritance. – The KNVB Jun 06 '19 at 02:54
1

It's not my solution. It the intentional behavior as defined by the specs. The inheritance applies to the property and not to the getter or setter alone. See also https://stackoverflow.com/q/28950760/4600982 – Supersharp Jun 06 '19 at 07:10

Why the parent custom element method is overridden?

1 Answers1