feat(lit-override): add host child component example, update dynamic …

…example to use child component
waldronmatt · Apr 5, 2024 · 66a4523 · 66a4523
1 parent a993d80
commit 66a4523
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 5 deletions.
diff --git a/apps/lit-override/src/html/host-with-child-component.html b/apps/lit-override/src/html/host-with-child-component.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <script src="../ts/host-with-child-component.ts" type="module"></script>
+  </head>
+
+  <body>
+    <h1>Overriding applied by the host app on a custom child component!</h1>
+    <host-app></host-app>
+    <br />
+    <a href="./index.html">Go Back</a>
+  </body>
+</html>
diff --git a/apps/lit-override/src/html/index.html b/apps/lit-override/src/html/index.html
@@ -10,15 +10,20 @@ <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-dynamic.html">Dynamically generated components with overrides 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>
   </body>
 </html>
diff --git a/apps/lit-override/src/ts/child-component.ts b/apps/lit-override/src/ts/child-component.ts
@@ -0,0 +1,43 @@
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { emit } from '@waldronmatt/lit-override/src/utils.js';
+
+export class ChildComponent extends LitElement {
+  static styles = css`
+    ::slotted([slot='heading']) {
+      color: teal;
+      background-color: lightgray;
+    }
+
+    ::slotted([slot='content']) {
+      color: teal;
+      background-color: black;
+    }
+  `;
+
+  @property({ reflect: true, type: Boolean })
+  emitConnectedCallback = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (this.emitConnectedCallback) {
+      emit(this, 'connected-callback');
+    }
+  }
+
+  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>`;
+  }
+}
+
+customElements.define('child-component', ChildComponent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'child-component': ChildComponent;
+  }
+}
diff --git a/apps/lit-override/src/ts/host-dynamic.ts b/apps/lit-override/src/ts/host-dynamic.ts
@@ -2,6 +2,7 @@ import { html, css, LitElement } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 import { until } from 'lit/directives/until.js';
 import { injectStyles, injectTemplate } from '@waldronmatt/lit-override/src/index.js';
+import './child-component.js';
 
 export class HostApp extends LitElement {
   private list = fetch('https://jsonplaceholder.typicode.com/users')
@@ -40,16 +41,18 @@ export class HostApp extends LitElement {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (item: any) => item.id,
             (item) => html`
-              <lit-override
+              <child-component
                 emitConnectedCallback
                 @connected-callback=${(event: { target: LitElement }) => {
-                  injectStyles([event.target], this.applyStyleOverride);
-                  injectTemplate([event.target], this.renderMarkupOverride());
+                  injectStyles([event.target], this.applyStyleOverride, item.id % 2 === 0 ? false : true);
+                  if (item.id % 2 === 0) {
+                    injectTemplate([event.target], this.renderMarkupOverride());
+                  }
                 }}
               >
                 <h3 slot="heading">${item.name}</h3>
                 <p slot="content">${item.company.catchPhrase}</p>
-              </lit-override>
+              </child-component>
             `,
           )}`;
         }),

diff --git a/apps/lit-override/src/ts/host-with-child-component.ts b/apps/lit-override/src/ts/host-with-child-component.ts
@@ -0,0 +1,65 @@
+import { html, css, LitElement } from 'lit';
+import { injectStyles, injectTemplate } from '@waldronmatt/lit-override/src/index.js';
+import './child-component.js';
+
+export class HostApp extends LitElement {
+  private applyStyleOverride = css`
+    :host {
+      display: block;
+      border: 2px solid #000000;
+      margin-top: 1rem;
+    }
+
+    ::slotted([slot='heading']) {
+      color: #0000ff;
+    }
+
+    ::slotted([slot='content']) {
+      color: #ff0000;
+    }
+  `;
+
+  private renderMarkupOverride() {
+    return html`
+      <slot name="heading"></slot>
+      <slot name="content"></slot>
+    `;
+  }
+
+  render() {
+    return html`
+      <h2>Override styles (preserves original child component styles)</h2>
+      <child-component
+        emitConnectedCallback
+        @connected-callback=${(event: { target: HTMLElement }) => {
+          injectStyles([event.target], this.applyStyleOverride);
+          injectTemplate([event.target], this.renderMarkupOverride());
+        }}
+      >
+        <h3 slot="heading">This is a heading from the <em>host app</em>!</h3>
+        <p slot="content">Here is a paragraph below the heading from the <em>host app</em>.</p>
+      </child-component>
+      <br />
+      <h2>Replace styles (original child component styles are removed)</h2>
+      <child-component
+        emitConnectedCallback
+        @connected-callback=${(event: { target: HTMLElement }) => {
+          injectStyles([event.target], this.applyStyleOverride, true);
+          injectTemplate([event.target], this.renderMarkupOverride());
+        }}
+      >
+        <h3 slot="heading">This is a heading from the <em>host app</em>!</h3>
+        <p slot="content">Here is a paragraph below the heading from the <em>host app</em>.</p>
+      </child-component>
+    `;
+  }
+}
+
+customElements.define('host-app', HostApp);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // @ts-expect-error - ignore duplicate declaration warning
+    'host-app': HostApp;
+  }
+}