webcomponents version has no property getters/setters

[thehans]

I am trying to use the webcomponents version, and am having trouble accessing properties from a change listener as shown in the docs (there is no example of a change handler for the webcomponents version, but I would expect it to work same as the main js+css version):

From README:

onChange: function (color) {
    // the only argument is the ReinventedColorWheel instance itself.
    // console.log("hsv:", color.hsv[0], color.hsv[1], color.hsv[2]);
  },

But color.hsv is undefined when I try something like this.

As I understand, the webcomponent class needs its own getters and setters defined for all valid properties(note: these differ from attributes), but there are none in https://github.com/luncheon/reinvented-color-wheel/blob/main/webcomponents/index.ts

[luncheon]

Sorry for not documenting it. Please handle the "change" event for that element.

document
  .querySelector("reinvented-color-wheel")
  .addEventListener("change", e => {
    // `detail` is the ReinventedColorWheel instance
    output.value = e.detail.hex;
  });

Demo: https://codepen.io/luncheon/pen/yLWPqKm