Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: How to handle render inheritance? #59

Closed
jimsimon opened this issue Aug 23, 2017 · 4 comments
Closed

Question: How to handle render inheritance? #59

jimsimon opened this issue Aug 23, 2017 · 4 comments

Comments

@jimsimon
Copy link
Contributor

What's the proper way to handle inheritance with this library?

Multiple:

class Base {
  render () {
    return html`<div></div>`
  }
}

class Derived extends Base {
  render () {
    return html`<span>${super.render()}</span>`
  }
}

const derived = new Derived()
render(derived.render(), document.body) // lit-html's render

Single v1:

class Base {
  render () {
    return `<div></div>`
  }
}

class Derived extends Base {
  render () {
    return html`<span>${super.render()}</span>`
  }
}

const derived = new Derived()
render(derived.render(), document.body) // lit-html's render

Single v2:

class Base {
  render () {
    return `<div></div>`
  }
}

class Derived extends Base {
  render () {
    return `<span>${super.render()}</span>`
  }
}

const derived = new Derived()
render(html`${derived.render()}`, document.body) // lit-html's render

Now that I think about it, I suspect that the multiple example won't actually work, but would love some confirmation.

@jimsimon
Copy link
Contributor Author

jimsimon commented Aug 23, 2017

In case it's not immediately clear: the multiple example uses the html template tag in each class's render function, the single v1 example only uses it at the end of the inheritance chain, and the single v2 example only uses it at the final lit-html render call.

@justinfagnani
Copy link
Collaborator

justinfagnani commented Aug 23, 2017

Good question. The "Multiple" example is the correct way do compose templates. A string without a html tag is just a string, and would be rendered as text, not HTML (it would render the text "<div></div>", not an empty <div>).

I think this becomes more clear when you have more complex templates with expressions. If you didn't tag them with html, they'd be strings with embedded values that aren't efficiently updatable.

@jimsimon
Copy link
Contributor Author

jimsimon commented Aug 23, 2017

Ah okay, that makes sense. If I'm understanding this correctly, the super.render() call in the "multiple" example would end up as a value right? In which case lit-html would detect that it's a TemplateResult and handle it accordingly (I think).

Thanks for the quick reply :)

@justinfagnani
Copy link
Collaborator

That's exactly correct :)

You're welcome!

aomarks added a commit that referenced this issue Nov 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants