fix(icon): workaround for webkit double render (ssr) (#2055)

* fix(icon): workaround for webkit double render (ssr) * chore: explicitly depend on lit-ssr * style(cta): whitespace * fix(cta): double ssr (webkit) * docs(cta): changeset --------- Co-authored-by: Adam Johnson <[email protected]>
RedHat-UX · Jan 8, 2025 · a37b594 · a37b594
1 parent 64dab19
commit a37b594
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 21 deletions.
diff --git a/.changeset/fifty-news-knock.md b/.changeset/fifty-news-knock.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-cta>`: workaround for Safari which sometimes double-renders icons
diff --git a/.changeset/rude-jeans-fix.md b/.changeset/rude-jeans-fix.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-icon>`: workaround for Safari which sometimes double-renders icons
diff --git a/elements/rh-cta/rh-cta.ts b/elements/rh-cta/rh-cta.ts
@@ -1,6 +1,7 @@
-import { LitElement, html, isServer, noChange } from 'lit';
+import { LitElement, html, isServer } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
+import { state } from 'lit/decorators/state.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -13,7 +14,6 @@ import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/c
 import type { IconNameFor, IconSetName } from '@rhds/icons';
 
 import style from './rh-cta.css';
-import { state } from 'lit/decorators/state.js';
 
 function isSupportedContent(el: Element | null): el is HTMLAnchorElement | HTMLButtonElement {
   return el instanceof HTMLAnchorElement || el instanceof HTMLButtonElement;
@@ -106,19 +106,13 @@ export class RhCta extends LitElement {
   /** when `href` is set, the link's `target` attribute */
   @property() target?: string;
 
-  /**
-   * Icon name
-   */
+  /** Icon name */
   @property({ reflect: true }) icon?: IconNameFor<IconSetName>;
 
-  /**
-   * Icon set
-   */
+  /** Icon set */
   @property({ attribute: 'icon-set' }) iconSet: IconSetName = 'ui';
 
-  /**
-   * Sets color theme based on parent context
-   */
+  /** Sets color theme based on parent context */
   @colorContextConsumer() @state() private on?: ColorTheme;
 
   protected override async getUpdateComplete(): Promise<boolean> {
@@ -142,17 +136,12 @@ export class RhCta extends LitElement {
     const rtl = this.#dir.dir === 'rtl';
     const isDefault = !variant;
     const svg = isDefault;
-    const iconOrSvg = isDefault || !!icon;
     const follower =
-      (variant !== 'brick' && icon) ?
-        html`<rh-icon .icon=${icon} .set=${iconSet ?? 'ui'}></rh-icon>`
-        : (variant === undefined) ?
-          html`<rh-icon set="ui" icon="arrow-right"></rh-icon>`
-          : html``;
+        (variant !== 'brick' && icon) ? html`<rh-icon icon=${icon} set=${iconSet ?? 'ui'}></rh-icon>`
+      : (variant === undefined) ? html`<rh-icon icon="arrow-right" set="ui"></rh-icon>`
+      : '';
     const iconContent =
-          (variant === 'brick' && icon) ?
-            html`<rh-icon .icon=${icon} set="${iconSet ?? 'ui'}"></rh-icon>`
-            : html``;
+      !(variant === 'brick' && icon) ? '' : html`<rh-icon .icon=${icon} set="${iconSet ?? 'ui'}"></rh-icon>`;
     const linkContent =
         !href ? html`<slot></slot>${follower}`
       : html`<a href=${href}
@@ -168,10 +157,16 @@ export class RhCta extends LitElement {
   }
 
   override firstUpdated() {
-    const { href, variant } = this;
+    // workaround for lit-ssr bugs
     if (!isServer) {
       this.removeAttribute('defer-hydration');
+      const [, ...duplicateContainers] = this.shadowRoot?.querySelectorAll('#container') ?? [];
+      for (const dupe of duplicateContainers) {
+        dupe.remove();
+      }
     }
+    // TODO: remove in next major version, recommend static HTML audits instead
+    const { href, variant } = this;
     const cta =
          this.shadowRoot?.querySelector('a')
       ?? this.shadowRoot?.querySelector('slot')?.assignedElements().find(isSupportedContent)

diff --git a/elements/rh-icon/rh-icon.ts b/elements/rh-icon/rh-icon.ts
@@ -120,6 +120,14 @@ export class RhIcon extends LitElement {
     `;
   }
 
+  updated() {
+    // this is a workaround for an apparent webkit / lit-ssr bug
+    const [, ...duplicateContainers] = this.shadowRoot?.querySelectorAll('#container') ?? [];
+    for (const dupe of duplicateContainers) {
+      dupe.remove();
+    }
+  }
+
   #getContent() {
     if (isServer) {
       const { set = 'standard', icon } = this;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -301,6 +301,8 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@lit-labs/eleventy-plugin-lit": "^1.0.3",
+    "@lit-labs/ssr": "^3.2.2",
+    "@lit-labs/ssr-client": "^1.1.7",
     "@lit/reactive-element": "^2.0.4",
     "@lit/ts-transformers": "^2.0.1",
     "@parse5/tools": "^0.5.0",