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?
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;
});