feat(lit-override): create new lit utilities for light dom, revamp ex…

…maple demos BREAKING CHANGE: Pathnames are different
waldronmatt · Apr 8, 2024 · ce44ad8 · ce44ad8
1 parent 3fbe22d
commit ce44ad8
Show file tree

Hide file tree

Showing 47 changed files with 754 additions and 508 deletions.
diff --git a/apps/lit-override/src/html/child-component.html b/apps/lit-override/src/html/child-component.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="../ts/child-component.ts" type="module"></script>
+  </head>
+
+  <body>
+    <h1>Default Child Component</h1>
+    <child-component>
+      <h3 slot="heading">Default heading text for the child component.</h3>
+      <p slot="content">Default paragraph text for the child component.</p>
+    </child-component>
+    <br />
+    <a href="./index.html">Go Back</a>
+  </body>
+</html>
diff --git a/apps/lit-override/src/html/default.html b/apps/lit-override/src/html/default.html
diff --git a/apps/lit-override/src/html/host-dynamic.html → apps/lit-override/src/html/dynamic.html b/apps/lit-override/src/html/host-dynamic.html → apps/lit-override/src/html/dynamic.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <script src="../ts/host-dynamic.ts" type="module"></script>
+    <script src="../ts/dynamic.ts" type="module"></script>
   </head>
 
   <body>

diff --git a/apps/lit-override/src/html/host-with-child-component.html b/apps/lit-override/src/html/host-with-child-component.html
diff --git a/apps/lit-override/src/html/index.html b/apps/lit-override/src/html/index.html
@@ -6,24 +6,31 @@
 
   <body>
     <h1>Welcome to Lit Override!</h1>
-    <h2>Examples:</h2>
-    <ul>
-      <li><a href="./default.html">Default Lit Override Component</a></li>
-      <li><a href="./host.html">Override markup and styles via host app</a></li>
-      <li>
-        <a href="./host-with-child-component.html"
-          >Override markup and styles via host app on a custom child component</a
-        >
-      </li>
-      <li><a href="./light-dom.html">Override markup and styles via light dom</a></li>
-      <li>
-        <a href="./markup-light-dom-styles-host.html">Override markup via light dom, override styles via host app</a>
-      </li>
-      <li>
-        <a href="./styles-light-dom-markup-host.html">Override styles via light dom, override markup via host app</a>
-      </li>
-      <li><a href="./host-lazy-loaded.html">Lazy-loaded components with style overrides via host app</a></li>
-      <li><a href="./host-dynamic.html">Dynamically generated components with overrides via host app</a></li>
-    </ul>
+
+    <section>
+      <h2>Prerequisite Examples</h2>
+      <ul>
+        <li><a href="./child-component.html">Default Child Component</a></li>
+        <li><a href="./lit-override.html">Default Lit Override Component</a></li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>Basic Examples</h2>
+      <ul>
+        <li><a href="./shadow-dom.html">Shadow DOM Overriding</a></li>
+        <li><a href="./light-dom.html">Light DOM Overriding</a></li>
+        <li><a href="./markup-light-dom.html">Hybrid - Markup: Light DOM | Styles: Shadow DOM</a></li>
+        <li><a href="./styles-light-dom.html">Hybrid - Styles: Light DOM | Markup: Shadow DOM</a></li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>Advanced Examples</h2>
+      <ul>
+        <li><a href="./lazy-loaded.html">Lazy-loading Overriding</a></li>
+        <li><a href="./dynamic.html">Dynamic Overriding</a></li>
+      </ul>
+    </section>
   </body>
 </html>
diff --git a/...t-override/src/html/host-lazy-loaded.html → apps/lit-override/src/html/lazy-loaded.html b/...t-override/src/html/host-lazy-loaded.html → apps/lit-override/src/html/lazy-loaded.html
@@ -5,6 +5,10 @@
   </head>
 
   <body>
+    <template id="childTemplate">
+      <slot name="heading"></slot>
+      <slot name="sub-heading"></slot>
+    </template>
     <h1>Override markup and styles on lazy loaded components!</h1>
     <div id="component-container"></div>
     <br />

diff --git a/apps/lit-override/src/html/light-dom.html b/apps/lit-override/src/html/light-dom.html
@@ -6,30 +6,34 @@
   </head>
 
   <body>
+    <template id="childTemplate">
+      <slot name="heading"></slot>
+      <slot name="sub-heading"></slot>
+      <style>
+        :host {
+          display: block;
+          background-color: #000000;
+          margin-top: 1rem;
+        }
+
+        ::slotted([slot='heading']) {
+          color: #ffffff;
+        }
+
+        ::slotted([slot='sub-heading']) {
+          color: #ffd700;
+        }
+      </style>
+    </template>
     <h1>Overriding applied by the light dom!</h1>
     <host-app>
-      <lit-override>
+      <child-component templateId="childTemplate">
         <h3 slot="heading">A heading from a template in the <em>light dom</em>!</h3>
-        <p slot="content">A paragraph from a template in the <em>light dom</em>.</p>
-        <template>
-          <slot name="heading"></slot>
-          <slot name="content"></slot>
-          <style>
-            :host {
-              display: block;
-              background-color: #000000;
-              margin-top: 1rem;
-            }
-
-            ::slotted([slot='heading']) {
-              color: #ffffff;
-            }
-
-            ::slotted([slot='content']) {
-              color: #ffd700;
-            }
-          </style>
-        </template>
+        <p slot="sub-heading">A paragraph from a template in the <em>light dom</em>.</p>
+      </child-component>
+      <lit-override templateId="childTemplate">
+        <h3 slot="heading">A heading from a template in the <em>light dom</em>!</h3>
+        <p slot="sub-heading">A paragraph from a template in the <em>light dom</em>.</p>
       </lit-override>
     </host-app>
     <br />

diff --git a/apps/lit-override/src/html/lit-override.html b/apps/lit-override/src/html/lit-override.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="../ts/lit-override.ts" type="module"></script>
+  </head>
+
+  <body>
+    <h1>Default Lit Override Component</h1>
+    <lit-override>
+      <p>Default Lit Override Component</p>
+      <ul>
+        <li>Item 1</li>
+        <li>Item 2</li>
+      </ul>
+    </lit-override>
+    <br />
+    <a href="./index.html">Go Back</a>
+  </body>
+</html>
diff --git a/apps/lit-override/src/html/markup-light-dom-styles-host.html b/apps/lit-override/src/html/markup-light-dom-styles-host.html
diff --git a/apps/lit-override/src/html/markup-light-dom.html b/apps/lit-override/src/html/markup-light-dom.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="../ts/markup-light-dom.ts" type="module"></script>
+  </head>
+
+  <body>
+    <template id="childTemplate">
+      <slot name="heading"></slot>
+      <slot name="sub-heading"></slot>
+    </template>
+    <h1>Markup slotted from the light dom and styles applied by the host app!</h1>
+    <host-app>
+      <child-component id="childTemplate">
+        <h3 slot="heading">A child component heading from a template in the <em>light dom</em>!</h3>
+        <p slot="sub-heading">A child component paragraph from a template in the <em>light dom</em>.</p>
+      </child-component>
+      <lit-override id="childTemplate">
+        <h3 slot="heading">A lit override component heading from a template in the <em>light dom</em>!</h3>
+        <p slot="sub-heading">A lit override component paragraph from a template in the <em>light dom</em>.</p>
+      </lit-override>
+    </host-app>
+    <br />
+    <a href="./index.html">Go Back</a>
+  </body>
+</html>
diff --git a/apps/lit-override/src/html/host.html → apps/lit-override/src/html/shadow-dom.html b/apps/lit-override/src/html/host.html → apps/lit-override/src/html/shadow-dom.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <script src="../ts/host.ts" type="module"></script>
+    <script src="../ts/shadow-dom.ts" type="module"></script>
   </head>
 
   <body>

diff --git a/apps/lit-override/src/html/styles-light-dom-markup-host.html b/apps/lit-override/src/html/styles-light-dom-markup-host.html
diff --git a/apps/lit-override/src/html/styles-light-dom.html b/apps/lit-override/src/html/styles-light-dom.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="../ts/styles-light-dom.ts" type="module"></script>
+  </head>
+
+  <body>
+    <template id="childTemplate">
+      <style>
+        :host {
+          display: block;
+          background-color: #000000;
+          margin-top: 1rem;
+        }
+
+        ::slotted([slot='heading']) {
+          color: #ffffff;
+        }
+
+        ::slotted([slot='sub-heading']) {
+          color: #ffd700;
+        }
+      </style>
+    </template>
+    <h1>Styles slotted from the light dom and markup applied by the host app!</h1>
+    <host-app>
+      <child-component id="childTemplate">
+        <h3 slot="heading">A child component heading from a Lit template in the <em>host app</em>!</h3>
+        <p slot="sub-heading">A child component paragraph from a Lit template in the <em>host app</em>.</p>
+      </child-component>
+      <lit-override id="childTemplate">
+        <h3 slot="heading">A lit override component heading from a Lit template in the <em>host app</em>!</h3>
+        <p slot="sub-heading">A lit override component paragraph from a Lit template in the <em>host app</em>.</p>
+      </lit-override>
+    </host-app>
+    <br />
+    <a href="./index.html">Go Back</a>
+  </body>
+</html>
diff --git a/apps/lit-override/src/ts/child-component.ts b/apps/lit-override/src/ts/child-component.ts
@@ -1,36 +1,40 @@
 import { LitElement, css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { emit } from '@waldronmatt/lit-override/src/utils.js';
+import { EmitConnectedCallback } from '@waldronmatt/lit-override/src/mixins/index.js';
+import { templateContentWithFallback } from '@waldronmatt/lit-override/src/directives/index.js';
+import { AdoptedStyleSheetsConverter } from '@waldronmatt/lit-override/src/controllers/index.js';
 
-export class ChildComponent extends LitElement {
+export class ChildComponent extends EmitConnectedCallback(LitElement) {
   static styles = css`
     ::slotted([slot='heading']) {
-      color: teal;
-      background-color: lightgray;
+      color: blue;
+      background-color: gray;
     }
 
     ::slotted([slot='content']) {
-      color: teal;
+      color: red;
       background-color: black;
     }
   `;
 
-  @property({ reflect: true, type: Boolean })
-  emitConnectedCallback = false;
+  @property({ reflect: true, type: String })
+  templateId!: string;
 
   connectedCallback() {
     super.connectedCallback();
+    new AdoptedStyleSheetsConverter(this, { id: this.templateId });
+  }
 
-    if (this.emitConnectedCallback) {
-      emit(this, 'connected-callback');
-    }
+  markup() {
+    return html`<section>
+      <slot name="heading"></slot>
+      <slot name="content"></slot>
+      <small>This is default markup from the custom child component!</small>
+    </section>`;
   }
 
   protected render() {
-    return html`<div>
-      <p>This is default markup from the custom child component!</p>
-      <slot name="heading"></slot> <slot name="content"></slot>
-    </div>`;
+    return html`${templateContentWithFallback({ fallback: this.markup(), id: this.templateId })}`;
   }
 }