bug: watch decorator doesn't work if we change the original tag name #3554
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Stencil Version
2.13.0
Current Behavior
My problem is that the @Watch decorator only works if I keep the original tag name.
- If I import a custom element from my stencil library and define it as a custom element like this:
My vanilla js app
import { MyComponent } from '@my-lib/dist/components/my-component.js';
customElements.define('my-component', MyComponent);
My simple component
import { Component, Prop, h, Watch } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
/**
* The first name
*/
@Prop({ reflect: true, mutable: true }) checked?: boolean = false;
@Watch('checked')
onValueChange(): void {
console.log('trigger from watch', this.checked);
}
private readonly onChange = (e: InputEvent): void => {
const isElementChecked = (e.target as HTMLInputElement).checked;
if (isElementChecked !== this.checked) {
this.checked = isElementChecked;
}
};
render() {
return <input onChange={this.onChange} type="checkbox" name="test" id="" />;
}
}
With this example, I can see in the console that the watch func triggered 🙌🏽
Expected Behavior
Suppose I change the original tag name when I define my component in customElement.define() I hope that the @Watch decorator keeps working but it doesn't.
Steps to Reproduce
You can recreate my example in Current behavior or download it and run the scripts like this:
npm i
npm run build
npm run start:test
And that's it! If you change the tag name from "my-component" to "my-component-test" the watch func stop working and you can't see in the console my message.
Code Reproduction URL
https://github.com/urielblanco/test-watch
Additional Information
No response