added tips to README.md

Signed-off-by: StoneyDSP <nathanjhood@googlemail.com>
nathanjhood · Oct 17, 2024 · ebc9eaf · ebc9eaf
1 parent b515383
commit ebc9eaf
Showing 1 changed file with 62 additions and 84 deletions.
diff --git a/README.md b/README.md
@@ -29,6 +29,21 @@ Powered by Typescript, TailwindCSS, ESBuild, and fast-refreshing development ser
 
 Step by step!
 
+- [`start`](#start)
+- [`class AppComponent {}`](#class-appcomponent-)
+- [`AppComponent.constructor()`](#appcomponentconstructor)
+- [`AppComponent extends HTMLElement`](#appcomponent-extends-htmlelement)
+- [`HTMLElement.super()`](#htmlelementsuper)
+- [`this`](#this)
+- [`AppComponent.innerHtml`](#appcomponentinnerhtml)
+- [`CustomElementRegistry`](#customelementregistry)
+- [`'app-component': AppComponent`](#app-component-appcomponent)
+- [`AppComponent.render()`](#appcomponentrender)
+- [`AppComponent.render(innerHTML)`](#appcomponentrenderinnerhtml)
+- [`<app-component>`](#app-component)
+- [Tips](#tips)
+- [Further Reading](#further-reading)
+
 ### `start`
 
 ```sh
@@ -131,32 +146,15 @@ class AppComponent extends HTMLElement {
 
 ---
 
-### `AppComponent.shadowRoot`
-
-```ts
-// "attachShadow()" comes from extending the HTMLElement class ;)
-
-class AppComponent extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-  }
-}
-
-```
-
----
-
-### `AppComponent.shadowRoot.innerHtml`
+### `AppComponent.innerHtml`
 
 ```ts
 // 'innerHTML' === <app-component>innerHTML</app-component>
 
 class AppComponent extends HTMLElement {
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = `<slot>Your app goes here</slot>`;
+    this.innerHTML = `<slot>Your app goes here</slot>`;
   }
 }
 ```
@@ -176,63 +174,14 @@ window.customElements.define('app-component',
   class AppComponent extends HTMLElement {
     constructor() {
       super();
-      this.attachShadow({ mode: 'open' });
-      this.shadowRoot.innerHTML = `<slot>Your app goes here</slot>`;
-    }
-  }
-);
-```
-
----
-
-### `root.appendChild(ApplicationComponent)`
-
-```ts
-window.customElements.define('app-component',
-  class AppComponent extends HTMLElement {
-    constructor() {
-      super();
-      this.attachShadow({ mode: 'open' });
-      this.shadowRoot.innerHTML = `<slot>Your app goes here</slot>`;
-	    document.getElementById("root")?.appendChild(this);
+      this.innerHTML = `<slot>Your app goes here</slot>`;
     }
   }
 );
 ```
 
 ---
 
-### `<app-component>`
-
-```html
-<!-- This is what you see in your IDE... -->
-<!doctype html>
-<html lang="en">
-  <head></head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./static/js/index.js"></script>
-  </body>
-</html>
-```
-
-```html
-<!-- ...this is what you see in your web browser! -->
-<!doctype html>
-<html lang="en">
-  <head></head>
-  <body>
-    <div id="root">
-      <app-component>
-        #shadowRoot (open)
-        <slot>"Your App Goes Here!"</slot>
-      </app-component>
-    </div>
-    <script type="module"></script>
-  </body>
-</html>
-```
-
 ---
 
 ### `AppComponent.render()`
@@ -241,9 +190,7 @@ window.customElements.define('app-component',
 class AppComponent extends HTMLElement {
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = this.render();
-	document.getElementById("root")?.appendChild(this);
+    this.innerHTML = this.render();
   }
   render() {
     return `<slot>Your app goes here</slot>`;
@@ -253,18 +200,16 @@ class AppComponent extends HTMLElement {
 
 ---
 
-### `AppComponent.render(message)`
+### `AppComponent.render(innerHTML)`
 
 ```ts
 class AppComponent extends HTMLElement {
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = this.render('Your app goes here');
-	  document.getElementById("root")?.appendChild(this);
+    this.innerHTML = this.render('Your app goes here');
   }
-  render(message) {
-    return `<slot>${message}</slot>`;
+  render(innerHTML: string): string {
+    return `<slot>${innerHTML}</slot>`;
   }
 }
 ```
@@ -279,19 +224,52 @@ class AppComponent extends HTMLElement {
     super();
 	  this.setup();
   }
-  setup() {
-	  this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = this.render('Your app goes here');
-	  document.getElementById("root")?.appendChild(this);
+  setup(): void {
+    this.innerHTML = this.render('Your app goes here');
   }
-  render(message) {
-    return `<slot>${message}</slot>`;
+  render(innerHTML: string): string {
+    return `<slot>${innerHTML}</slot>`;
   }
 }
 ```
 
 ---
 
+### `<app-component>`
+
+```html
+<!-- This is what you see in your IDE... -->
+<!doctype html>
+<html lang="en">
+  <head></head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./static/js/index.js"></script>
+  </body>
+</html>
+```
+
+```html
+<!-- ...this is what you see in your web browser! -->
+<!doctype html>
+<html lang="en">
+  <head></head>
+  <body>
+    <div id="root">
+      <app-component>
+        #shadowRoot (open)
+        <slot>"Your App Goes Here!"</slot>
+      </app-component>
+    </div>
+    <script type="module"></script>
+  </body>
+</html>
+```
+
+## Tips
+
+---
+
 ### functional approach
 
 ```ts