chore: add template vs render() section to readme

README.md

@@ -16,6 +16,7 @@ The result is a reactive UI on property changes.
 1. [Import via unpkg](#import-via-unpkg)
 1. [Installation via npm](#installation-via-npm)
 1. [Usage](#usage)
+1. [`template` vs `render()`](#template-vs-render)
 1. [Quick Start Example](#quick-start-example)
 1. [Life-Cycle Hooks](#life-cycle-hooks)
     1. [`onInit`](#oninit) - the component is connected to the DOM, before view is initialized
@@ -82,6 +83,15 @@ The result is a reactive UI that updates on attribute changes:
 
 <img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="https://git.sr.ht/~ayoayco/web-component-base/blob/main/assets/wc-base-demo.gif" width="400" />
 
+## `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. This makes the template close to modification.
+1. There is a `render()` method that triggers a view render.
+1. This `render()` method is *automatically* called under the hood every time an attribute value changed.
+1. You can *optionally* call this `render()` method at any point to trigger a render if you need.
+
 ## Quick Start Example
 
 Here is an example of using a custom element in a single .html file:
@@ -179,4 +189,4 @@ class ClickableText extends WebComponent {
     return `<span style="cursor:pointer">Click me!</span>`;
   }
 }
-```
+```

demo/HelloWorld.mjs

@@ -1,6 +1,6 @@
 // @ts-check
 
-import WebComponent from "../dist";
+import WebComponent from "../src/index.js";
 
 export class HelloWorld extends WebComponent {
   name = "World";

demo/SimpleText.mjs

@@ -1,6 +1,6 @@
 // @ts-check
 
-import WebComponent from "../dist/index";
+import WebComponent from "../src/index.js";
 
 class SimpleText extends WebComponent {
   onInit() {