I have a set of basic web components made out of plain JS. Example:
Account.ts
class Account extends HTMLElement{
constructor(){
super();
this.innerHTML = '<p>My account</p>';
}
}
customElements.define('account', Account);
Basket.ts
class Basket extends HTMLElement{
constructor(){
super();
this.innerHTML = '<p>My Basket</p>';
}
}
customElements.define('basket', Basket);
I am trying to create another web component (common) that can be nested in each of the above. For now, lets assume a basic <button>
with a click event. I have tried:
CommonButton.ts
class CommonButton extends HTMLElement{
constructor(){
super();
this.innerHTML = '<button onclick="console.log('clicked')">Click Me</button>';
}
}
customElements.define('common-button', CommonButton);
Account.ts
class Account extends HTMLElement{
constructor(){
super();
this.innerHTML = `
<p>My Account</p>
<common-button></common-button>
`;
}
}
customElements.define('account', Account);
There are no errors in the browser. I can see in the generated HTML:
<account>
<p>My Account</p>
<common-button></common-button>
</account>
However no <button>
inside of <common-button>