Using functions defined within web component

I have build my web component DataUint and assigned it a tag <data-uint> like this:

class DataUint extends HTMLElement
{
   ...
   set value(x) { ... }
   ...
}

customElements.define("data-uint", DataUint);

When creating and accessing a component like this:

x = document.createElement('data-uint');
x.value = 10;

the call to value indeed calls the setter method and performs its function.

However when I built-in my component in the html code:

<body>
   <data-uint id='num'></data-uint>
</body>

and trying to access/use it like this:

x = body.children[0];
x.value = 10;

the call to value sets a new property to Element that is referenced by x, but never calls the setter method of the web component. The x however refers to the correct element on the page (my component) which I verified by calling other standard Element methods. It looks like this access method is returning a generic Element ignoring specializations.

Question:

I guess I am missing some basic concept here. How do I access html-defined component from JavaScript in a way that will allow me to use its member functions?

Solution

You are probably executing x = body.children[0]; x.value = 10; before the component is defined. Also note that unless you have declared a local variable body before that code runs, body will be undefined and you probably mean to use const x = document.body.children[0];.

Add this line of code:

const x = document.body.children[0]; 
console.log(x.constructor.name);
x.value = 10;

If that gives you HTMLElement, your component isn't defined at the time. If it's not defined yet, there is no setter to execute.

To check, you can also do console.log(x.matches(':defined'));.

To fix that, either wrap your code in a DOMContentLoaded listener, or wait for the component to be defined:

customElements
  .whenDefined('data-uint')
  .then((promise) => {
    const x = document.body.children[0]; 
    console.log(x.constructor.name);
    x.value = 10;
  });