litedom
litedom copied to clipboard
Nested component support
Hi @mardix - nice library. I really like the API.
I've been playing around with it though and I can't get nested components to work correctly. Can you see if I'm doing something incorrectly?
<script type="module">
import Litedom from "//unpkg.com/litedom";
Litedom({
tagName: "hello-world",
template: `
<div>
{this.greeting} {this.prop.name}!
<hello-child name={this.greeting}></hello-child>
<button @click="changeGreeting">Click</button>
</div>`,
data: {
greeting: "Hello"
},
changeGreeting(event) {
this.data.greeting = "Goodbye";
}
});
Litedom({
tagName: "hello-child",
template: `<i>{this.foo} {this.prop.name}!</i>`,
data: {
foo: "Bar"
}
});
</script>
<hello-world name="Mardix"> </hello-world>
This code renders fine first time but if I click the button, the greeting
state is changed, the component re-renders but the child component, <hello-child>
, loses its data and props.
You can see it here
Anyone have any suggestions?