The setters and getters are not called in a custom web component

I have the following web component:

I originally tested this locally, (in a create-react-app) didn't work. I then put it into codesandbox (react template) where it doesn't work either.

class CounterWebComponent extends HTMLElement {
  constructor() {
    console.log("ctor");
    super();
  }

  _count: number = 0;

  set count(value: number) {
    console.log("CounterWebComponent set", value);
    this._count = value;
  }

  get count() {
    console.log("CounterWebComponent get", this._count);
    return this._count;
  }

  connectedCallback() {
    console.log("CounterWebComponent connected");
    this.innerHTML = "<h1>fff</h1>";
  }
  disconnectedCallback() {
    console.log("CounterWebComponent disconnected");
  }
}

if (!customElements.get("counter-wc-custom"))
  customElements.define("counter-wc-custom", CounterWebComponent);

In index.html I'm trying to set the count:

    <counter-wc-custom id="counter1"></counter-wc-custom>
    <script>
      const counter2 = document.getElementById("counter1");
      counter2.count = 23;
      alert(counter2.count);
      alert(counter2._count); //using alert because console.log inside index.html is not working for some reason in codesandbox
      console.log("count", counter2.count); 
      console.log("_count", counter2._count);

      counter2.addEventListener("count", (e) => console.log(e));
    </script>

If I use it like this it works:

const a = document.createElement("counter-wc-custom");
a.count = 2;
console.log("count", a.count);
console.log("_count", a._count);

EDIT: https://codesandbox.io/s/react-web-component-custom-wrapper-xh2n9s (I forgot the link like an idiot)

I assume I configured something somewhere incorrectly but I have no idea what. Any help is appreciated.

This has to do with timing; specifically, when you set the property versus when you define the custom element. Let's say we do:

<hello-world></hello-world>
<script>
const helloWorld = document.querySelector('hello-world');

helloWorld.message = 'Foo!'

customElements.define('hello-world', class extends HTMLElement {
    #message = 'Default message.'
    get message(){ return this.#message; }
    set message(value){
        this.#message = value;
        console.log('Message: ', this.#message);
    }
});

helloWorld.message = 'Bar?'
</script>

In this example, we set the message property on the helloWorld instance before the instance is defined. Then when we define the custom element, the getters and setters are defined on the element's prototype; but, the helloWorld instance now already has an "own" property message. This means even setting the message to Bar? after definition doesn't trigger the setter, because it's still just using the property initially defined on the instance, completely ignoring the getters and setters.

If we now delete helloWorld.message, we remove that initially defined property, and then doing helloWorld.message = 'Baz!' will finally trigger the setter.

You can actually check that this is the case by getting a reference to the custom element instance in question and seeing what the result is of Object.getOwnPropertyDescriptors(elementInstance). Any properties included in the result of that call are "overwriting" getters and setters you may have defined on the prototype, and so are likely unwanted.

In the example I gave above, the order things run in is (intentionally) obvious. In codesandbox, it might be a little less obvious; looking at the actual page it outputs it seems like it is indeed running your .count = 23 before it defines the component (and the above check indeed reveals count to be among the ownPropertyDescriptors).

The way I see it, there are a two main ways to solve this issue:

1. Make sure your custom element definitions run before doing setting properties on instances, either by rearranging your included scripts or through customElements.whenDefined(...).
2. In case your custom element needs to support this, adjust your component to read any own property descriptors it can find on the instance and do the delete-set thing I mentioned above in the custom element constructor.

I think you should update the index.html like this.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.addEventListener("DOMContentLoaded", function() {
  const counter2 = document.getElementById("counter1");
  counter2.count = 23;
  console.log("count", counter2.count);
  console.log("_count", counter2._count);

  counter2.addEventListener("count", (e) => console.log(e));
});

<!-- language: lang-html -->

<counter-wc-custom id="counter1"></counter-wc-custom>

<!-- end snippet -->

The issue is related to the timing of when the script is being executed compared to when the custom element is defined and connected to the DOM.

When you directly access the element in the HTML file the script is trying to manipulate the custom element before it's connected and ready.

Wrap your script inside a DOMContentLoaded event listener to make sure that the custom element has been defined and connected to the DOM before you try to access its properties.

document.addEventListener('DOMContentLoaded', () => {
    const counter2 = document.getElementById("counter1");
    counter2.count = 23;
    alert(counter2.count);
    alert(counter2._count);
    console.log("count", counter2.count); 
    console.log("_count", counter2._count);

    counter2.addEventListener("count", (e) => console.log(e));
  });

Codesandbox isn't reliable for displaying most of logs (not sure why),
i removed some of the boilerplate(react part) and created a snippet in SO, you can see your code works - i removed _count as it is not needed (if you don't care about privacy of the variable)

however you can check, that your approach works (both set and get logs are there):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

class CounterWebComponent extends HTMLElement {
  static get observedAttributes() {
    return ["count"];
  }

  constructor() {
    console.log("CounterWebComponent");
    super();
  }

  set count(value) {
    console.log("CounterWebComponent set", value);
  }

  get count() {
    console.log("CounterWebComponent get");
    return this.getAttribute("count");
  }

  connectedCallback() {
    console.log("CounterWebComponent connected");
    this.innerHTML = `<h1>fff: ${this.count}</h1>`;
  }

  disconnectedCallback() {
    console.log("CounterWebComponent disconnected");
  }
}

if (!customElements.get("counter-wc-custom"))
  customElements.define("counter-wc-custom", CounterWebComponent);

const counter = document.getElementById("counter1");
console.log(counter.count);
counter.count = 35;

<!-- language: lang-html -->

<div id="app"></div>
<counter-wc-custom id="counter1" count="50"></counter-wc-custom>

<!-- end snippet -->

It looks like you're trying to create a web component named CounterWebComponent and set its count property. However, there are a couple of issues in your code that need to be addressed.

Property Initialization: The properties of the class should be initialized inside the constructor using this, and not using class field syntax.

Event Dispatching: You are trying to add an event listener for a "count" event, but you're not actually dispatching any such event in your code.

Here's an updated version of your code that should work as expected:

    class CounterWebComponent extends HTMLElement {
    constructor() {
    super();
    console.log("ctor");
    
    this._count = 0; // Initialize the count property
    
    // Listen to changes in the count property
    Object.defineProperty(this, 'count', {
      get: () => {
        console.log("CounterWebComponent get", this._count);
        return this._count;
      },
      set: (value) => {
        console.log("CounterWebComponent set", value);
        this._count = value;
        
        // Dispatch a custom event when the count is updated
        const event = new CustomEvent('countUpdated', { detail: value });
        this.dispatchEvent(event);
      }
    });
  }

  connectedCallback() {
    console.log("CounterWebComponent connected");
    this.innerHTML = "<h1>fff</h1>";
  }
  
  disconnectedCallback() {
    console.log("CounterWebComponent disconnected");
  }
}

if (!customElements.get("counter-wc-custom"))
  customElements.define("counter-wc-custom", CounterWebComponent);

In your HTML and script:

<counter-wc-custom id="counter1"></counter-wc-custom>
<script>
  const counter2 = document.getElementById("counter1");
  
  counter2.count = 23;
  
  // Listen to the custom "countUpdated" event
  counter2.addEventListener("countUpdated", (e) => {
    console.log("countUpdated event", e.detail);
  });
</script>

By dispatching the custom "countUpdated" event when the count property is set, you can now listen to this event and handle it accordingly. This updated code should give you the desired behavior.