From cf153d0556404b60bf9876348f52c1ee05725360 Mon Sep 17 00:00:00 2001
From: Marcelo JCS <marcelojcs@outlook.com>
Date: Thu, 24 Oct 2024 22:13:29 -0300
Subject: [PATCH] fix(conten-group-heading): render h3 tag to light DOM
 (#12074)

### Related Ticket(s)
[JIRA](https://jsw.ibm.com/browse/ADCMS-5810)

### Description

Google analytics tools can't pickup on heading elements in shadowroots. We've been asked to adjust content-group-heading elements.
This PR addresses the issue by rendering an h3 element to the light DOM.


### Changelog
the content-group-heading component will now wrap the slotted markup in and <h3> and write the result to the light DOM for SEO purposes
---
 .../content-group/_content-group.scss         |  5 +++++
 .../content-group/content-group-heading.ts    | 20 +++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/styles/scss/internal/content-group/_content-group.scss b/packages/styles/scss/internal/content-group/_content-group.scss
index 8ebd9329336..41506918c15 100644
--- a/packages/styles/scss/internal/content-group/_content-group.scss
+++ b/packages/styles/scss/internal/content-group/_content-group.scss
@@ -59,6 +59,11 @@
 
     display: block;
     margin-block-end: $spacing-07;
+
+    ::slotted(h3) {
+      // stylelint-disable-next-line declaration-no-important
+      font-size: inherit !important;
+    }
   }
 
   :host(#{$c4d-prefix}-content-group-heading),
diff --git a/packages/web-components/src/components/content-group/content-group-heading.ts b/packages/web-components/src/components/content-group/content-group-heading.ts
index b03ab73e4ba..a8608f73ad7 100644
--- a/packages/web-components/src/components/content-group/content-group-heading.ts
+++ b/packages/web-components/src/components/content-group/content-group-heading.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html } from 'lit';
+import { LitElement, html, render } from 'lit';
 import { property } from 'lit/decorators.js';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
@@ -20,6 +20,7 @@ const { stablePrefix: c4dPrefix } = settings;
  * The heading content in content group.
  *
  * @element c4d-content-group-heading
+ * @csspart heading - The Heading. Usage: `c4d-content-group-heading::part(heading)`
  */
 @customElement(`${c4dPrefix}-content-group-heading`)
 class C4DContentGroupHeading extends StableSelectorMixin(LitElement) {
@@ -29,6 +30,17 @@ class C4DContentGroupHeading extends StableSelectorMixin(LitElement) {
   @property({ reflect: true })
   slot = 'heading';
 
+  /**
+   * Render the heading tag into the light DOM of this component.
+   */
+  protected _renderHeading() {
+    const template = document.createElement('template');
+    template.innerHTML = `<h3>${this.innerHTML.trim()}</h3>`;
+    this.innerHTML = '';
+    const heading = template.content.firstChild;
+    render(html`${heading}`, this);
+  }
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'heading');
@@ -39,8 +51,12 @@ class C4DContentGroupHeading extends StableSelectorMixin(LitElement) {
     super.connectedCallback();
   }
 
+  firstUpdated() {
+    this._renderHeading();
+  }
+
   render() {
-    return html` <slot></slot> `;
+    return html`<slot></slot>`;
   }
 
   static get stableSelector() {