template vs render()

This mental model attempts to reduce the cognitive complexity of authoring components:

1. The template is a read-only property (initialized with a get keyword) that represents how the component view is rendered.
2. There is a render() method that triggers a view render.
3. This render() method is automatically called under the hood every time an attribute value changed.
4. You can optionally call this render() method at any point to trigger a render if you need (eg, if you have private unobserved properties that need to manually trigger a render)
5. Overriding the render() function for handling a custom template is also possible. Here’s an example of using lit-html: View on CodePen ↗