import {render, defineElement, prop, CustomElement} from "../../packages/csx";

@defineElement('base-component-2')
class BaseComponent extends CustomElement{
    @prop()
    name;
    
    render(){
        return (
            <div>
                <label>Value is</label>
                <div>{this.name}</div>
            </div>
        )
    }
}
@defineElement('extended-component-2')
class ExtendedComponent extends BaseComponent{
    @prop()
    set name(value){
        super.name = `Hi my name is ${value??""}`;
    }
    get name(){
        return super.name;
    }
}

let test = render(<ExtendedComponent name="John Johnson"/>);

document.body.appendChild(test);