From 44c13be30d91511e43f65c968d9dd057e4e9b085 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 15:20:45 +0000
Subject: [PATCH 01/12] feat(config): add option to disable html functionality

---
 core/src/utils/config.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index 3069923b6bc..ce14c46d9db 100644
--- a/core/src/utils/config.ts
+++ b/core/src/utils/config.ts
@@ -187,6 +187,14 @@ export interface IonicConfig {
    */
   sanitizerEnabled?: boolean;
 
+  /**
+   * Relevant Components: ion-alert, ion-infinite-scroll-content, ion-loading, ion-refresher-content, ion-toast
+   * If `false`, all `innerHTML` usage will be disabled in Ionic, and
+   * custom HTML will not be usable in the relevant components.
+   * `innerHTML` usage is enabled by default.
+   */
+  enableHTMLContent?: boolean;
+
   /**
    * Overrides the default platform detection methods.
    */

From 7fa3d82617db149b8b7a2ac9d4cfdff64c16cca1 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 15:21:04 +0000
Subject: [PATCH 02/12] chore(): update docs

---
 core/src/components.d.ts                      | 24 +++++++++----------
 core/src/components/alert/alert.tsx           |  5 ++++
 .../infinite-scroll-content.tsx               |  5 ++++
 core/src/components/loading/loading.tsx       |  5 ++++
 .../refresher-content/refresher-content.tsx   | 10 ++++++++
 core/src/components/toast/toast.tsx           |  4 ++++
 6 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index ee2a8c7bdc6..ae33e2437b8 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -192,7 +192,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -1039,7 +1039,7 @@ export namespace Components {
          */
         "loadingSpinner"?: SpinnerTypes | null;
         /**
-          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "loadingText"?: string | IonicSafeString;
     }
@@ -1422,7 +1422,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Optional text content to display in the loading indicator.
+          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -2221,7 +2221,7 @@ export namespace Components {
          */
         "pullingIcon"?: SpinnerTypes | string | null;
         /**
-          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "pullingText"?: string | IonicSafeString;
         /**
@@ -2229,7 +2229,7 @@ export namespace Components {
          */
         "refreshingSpinner"?: SpinnerTypes | null;
         /**
-          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "refreshingText"?: string | IonicSafeString;
     }
@@ -2990,7 +2990,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Message to be shown in the toast.
+          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -4147,7 +4147,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -5045,7 +5045,7 @@ declare namespace LocalJSX {
          */
         "loadingSpinner"?: SpinnerTypes | null;
         /**
-          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "loadingText"?: string | IonicSafeString;
     }
@@ -5420,7 +5420,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Optional text content to display in the loading indicator.
+          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -6188,7 +6188,7 @@ declare namespace LocalJSX {
          */
         "pullingIcon"?: SpinnerTypes | string | null;
         /**
-          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "pullingText"?: string | IonicSafeString;
         /**
@@ -6196,7 +6196,7 @@ declare namespace LocalJSX {
          */
         "refreshingSpinner"?: SpinnerTypes | null;
         /**
-          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "refreshingText"?: string | IonicSafeString;
     }
@@ -6999,7 +6999,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Message to be shown in the toast.
+          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 8e7284fefe2..2bbc1d02358 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -93,6 +93,11 @@ export class Alert implements ComponentInterface, OverlayInterface {
    * `&lt;Ionic&gt;`
    *
    * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+   *
+   * This property accepts custom HTML as a string.
+   * Developers who only want to pass plain text
+   * can disable the custom HTML functionality
+   * by setting `enableHTMLContent: false` in the Ionic config.
    */
   @Prop() message?: string | IonicSafeString;
 
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 10c2221575e..6da5dfe9a41 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -28,6 +28,11 @@ export class InfiniteScrollContent implements ComponentInterface {
    * `&lt;Ionic&gt;`
    *
    * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+   *
+   * This property accepts custom HTML as a string.
+   * Developers who only want to pass plain text
+   * can disable the custom HTML functionality
+   * by setting `enableHTMLContent: false` in the Ionic config.
    */
   @Prop() loadingText?: string | IonicSafeString;
 
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index 6be77e57318..483d25641ad 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -61,6 +61,11 @@ export class Loading implements ComponentInterface, OverlayInterface {
 
   /**
    * Optional text content to display in the loading indicator.
+   *
+   * This property accepts custom HTML as a string.
+   * Developers who only want to pass plain text
+   * can disable the custom HTML functionality
+   * by setting `enableHTMLContent: false` in the Ionic config.
    */
   @Prop() message?: string | IonicSafeString;
 
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index 71602e05038..694b6fb2bd1 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -31,6 +31,11 @@ export class RefresherContent implements ComponentInterface {
    * `&lt;Ionic&gt;`
    *
    * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+   *
+   * This property accepts custom HTML as a string.
+   * Developers who only want to pass plain text
+   * can disable the custom HTML functionality
+   * by setting `enableHTMLContent: false` in the Ionic config.
    */
   @Prop() pullingText?: string | IonicSafeString;
 
@@ -47,6 +52,11 @@ export class RefresherContent implements ComponentInterface {
    * `&lt;Ionic&gt;`
    *
    * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+   *
+   * This property accepts custom HTML as a string.
+   * Developers who only want to pass plain text
+   * can disable the custom HTML functionality
+   * by setting `enableHTMLContent: false` in the Ionic config.
    */
   @Prop() refreshingText?: string | IonicSafeString;
 
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 50812b7a066..be7cb43cf28 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -99,6 +99,10 @@ export class Toast implements ComponentInterface, OverlayInterface {
 
   /**
    * Message to be shown in the toast.
+   * This property accepts custom HTML as a string.
+   * Developers who only want to pass plain text
+   * can disable the custom HTML functionality
+   * by setting `enableHTMLContent: false` in the Ionic config.
    */
   @Prop() message?: string | IonicSafeString;
 

From 1c2b6a0a4b826e7cb09cd1cf758221d4b1d6dadf Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 15:51:15 +0000
Subject: [PATCH 03/12] implement in infinite-scroll-content

---
 .../infinite-scroll-content.tsx               | 16 +++++++++--
 .../test/infinite-scroll-content.spec.ts      | 28 +++++++++++++++++++
 core/src/utils/config.ts                      |  2 ++
 3 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts

diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 6da5dfe9a41..847e7645c5f 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -2,6 +2,7 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
 import { config } from '../../global/config';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { SpinnerTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
@@ -15,6 +16,8 @@ import { sanitizeDOMString } from '../../utils/sanitization';
   },
 })
 export class InfiniteScrollContent implements ComponentInterface {
+  private customHTMLEnabled = config.get('enableHTMLContent', ENABLE_HTML_CONTENT_DEFAULT);
+
   /**
    * An animated SVG spinner that shows while loading.
    */
@@ -46,6 +49,15 @@ export class InfiniteScrollContent implements ComponentInterface {
     }
   }
 
+  private renderLoadingText() {
+    const { customHTMLEnabled, loadingText } = this;
+    if (customHTMLEnabled) {
+      return <div class="infinite-loading-text" innerHTML={sanitizeDOMString(loadingText)} />;
+    }
+
+    return <div class="infinite-loading-text">{this.loadingText}</div>;
+  }
+
   render() {
     const mode = getIonMode(this);
     return (
@@ -63,9 +75,7 @@ export class InfiniteScrollContent implements ComponentInterface {
               <ion-spinner name={this.loadingSpinner} />
             </div>
           )}
-          {this.loadingText !== undefined && (
-            <div class="infinite-loading-text" innerHTML={sanitizeDOMString(this.loadingText)} />
-          )}
+          {this.loadingText !== undefined && this.renderLoadingText()}
         </div>
       </Host>
     );
diff --git a/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
new file mode 100644
index 00000000000..dfd585309c7
--- /dev/null
+++ b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
@@ -0,0 +1,28 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { InfiniteScrollContent } from '../infinite-scroll-content';
+import { config } from '../../../global/config';
+
+describe('infinite-scroll-content: custom html', () => {
+  it('should allow for custom html by default', async () => {
+    const page = await newSpecPage({
+      components: [InfiniteScrollContent],
+      html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text</button>"></ion-infinite-scroll-content>`,
+    });
+
+    const content = page.body.querySelector('.infinite-loading-text');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+
+  it('should not allow for custom html', async () => {
+    config.reset({ enableHTMLContent: false });
+    const page = await newSpecPage({
+      components: [InfiniteScrollContent],
+      html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text2</button>"></ion-infinite-scroll-content>`,
+    });
+
+    const content = page.body.querySelector('.infinite-loading-text');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+});
diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index ce14c46d9db..4159242b85b 100644
--- a/core/src/utils/config.ts
+++ b/core/src/utils/config.ts
@@ -246,3 +246,5 @@ export const getMode = (): Mode => {
   }
   return 'md';
 };
+
+export const ENABLE_HTML_CONTENT_DEFAULT = true;

From 7bf8db477275ac51aff6738f26b9102826a73349 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 15:57:12 +0000
Subject: [PATCH 04/12] implement for refresher-content

---
 .../refresher-content/refresher-content.tsx   | 29 +++++++++++----
 .../test/refresher-content.spec.ts            | 36 +++++++++++++++++++
 2 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 core/src/components/refresher-content/test/refresher-content.spec.ts

diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index 694b6fb2bd1..9d139362a07 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -5,6 +5,7 @@ import { arrowDown, caretBackSharp } from 'ionicons/icons';
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { SpinnerTypes } from '../../interface';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
 import { isPlatform } from '../../utils/platform';
 import type { IonicSafeString } from '../../utils/sanitization';
 import { sanitizeDOMString } from '../../utils/sanitization';
@@ -14,6 +15,8 @@ import { SPINNERS } from '../spinner/spinner-configs';
   tag: 'ion-refresher-content',
 })
 export class RefresherContent implements ComponentInterface {
+  private customHTMLEnabled = config.get('enableHTMLContent', ENABLE_HTML_CONTENT_DEFAULT);
+
   @Element() el!: HTMLIonRefresherContentElement;
 
   /**
@@ -78,6 +81,24 @@ export class RefresherContent implements ComponentInterface {
     }
   }
 
+  private renderPullingText() {
+    const { customHTMLEnabled, pullingText } = this;
+    if (customHTMLEnabled) {
+      return <div class="refresher-pulling-text" innerHTML={sanitizeDOMString(pullingText)}></div>;
+    }
+
+    return <div class="refresher-pulling-text">{pullingText}</div>;
+  }
+
+  private renderRefreshingText() {
+    const { customHTMLEnabled, refreshingText } = this;
+    if (customHTMLEnabled) {
+      return <div class="refresher-refreshing-text" innerHTML={sanitizeDOMString(refreshingText)}></div>;
+    }
+
+    return <div class="refresher-refreshing-text">{refreshingText}</div>;
+  }
+
   render() {
     const pullingIcon = this.pullingIcon;
     const hasSpinner = pullingIcon != null && (SPINNERS[pullingIcon] as any) !== undefined;
@@ -103,9 +124,7 @@ export class RefresherContent implements ComponentInterface {
               <ion-icon icon={this.pullingIcon} lazy={false}></ion-icon>
             </div>
           )}
-          {this.pullingText !== undefined && (
-            <div class="refresher-pulling-text" innerHTML={sanitizeDOMString(this.pullingText)}></div>
-          )}
+          {this.pullingText !== undefined && this.renderPullingText()}
         </div>
         <div class="refresher-refreshing">
           {this.refreshingSpinner && (
@@ -113,9 +132,7 @@ export class RefresherContent implements ComponentInterface {
               <ion-spinner name={this.refreshingSpinner}></ion-spinner>
             </div>
           )}
-          {this.refreshingText !== undefined && (
-            <div class="refresher-refreshing-text" innerHTML={sanitizeDOMString(this.refreshingText)}></div>
-          )}
+          {this.refreshingText !== undefined && this.renderRefreshingText()}
         </div>
       </Host>
     );
diff --git a/core/src/components/refresher-content/test/refresher-content.spec.ts b/core/src/components/refresher-content/test/refresher-content.spec.ts
new file mode 100644
index 00000000000..b46a5086681
--- /dev/null
+++ b/core/src/components/refresher-content/test/refresher-content.spec.ts
@@ -0,0 +1,36 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { RefresherContent } from '../refresher-content';
+import { config } from '../../../global/config';
+
+describe('refresher-content: custom html', () => {
+  it('should allow for custom html by default', async () => {
+    const page = await newSpecPage({
+      components: [RefresherContent],
+      html: `<ion-refresher-content pulling-text="<button class='custom-pulling-html'>Custom Pulling Text</button>" refreshing-text="<button class='custom-refreshing-html'>Custom Refreshing Text</button>"></ion-refresher-content>`,
+    });
+
+    const pullingContent = page.body.querySelector('.refresher-pulling-text');
+    expect(pullingContent.textContent).toContain('Custom Pulling Text');
+    expect(pullingContent.querySelector('button.custom-pulling-html')).not.toBe(null);
+
+    const refreshingContent = page.body.querySelector('.refresher-refreshing-text');
+    expect(refreshingContent.textContent).toContain('Custom Refreshing Text');
+    expect(refreshingContent.querySelector('button.custom-refreshing-html')).not.toBe(null);
+  });
+
+  it('should not allow for custom html', async () => {
+    config.reset({ enableHTMLContent: false });
+    const page = await newSpecPage({
+      components: [RefresherContent],
+      html: `<ion-refresher-content pulling-text="<button class='custom-pulling-html'>Custom Pulling Text</button>" refreshing-text="<button class='custom-html'>Custom Refreshing Text</button>"></ion-refresher-content>`,
+    });
+
+    const pullingContent = page.body.querySelector('.refresher-pulling-text');
+    expect(pullingContent.textContent).toContain('Custom Pulling Text');
+    expect(pullingContent.querySelector('button.custom-pulling-html')).toBe(null);
+
+    const refreshingContent = page.body.querySelector('.refresher-refreshing-text');
+    expect(refreshingContent.textContent).toContain('Custom Refreshing Text');
+    expect(refreshingContent.querySelector('button.custom-refreshing-html')).toBe(null);
+  });
+});

From a96f8b8518c8f56efb6c7ad934f4e5ab8aa32981 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 15:57:19 +0000
Subject: [PATCH 05/12] lint

---
 .../infinite-scroll-content/infinite-scroll-content.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 847e7645c5f..9bdf7f534bf 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -2,9 +2,9 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
 
 import { config } from '../../global/config';
-import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { SpinnerTypes } from '../../interface';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
 import type { IonicSafeString } from '../../utils/sanitization';
 import { sanitizeDOMString } from '../../utils/sanitization';
 

From efb832ab90551ca778441e58c3b4e87a1bf6b28f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 15:57:34 +0000
Subject: [PATCH 06/12] clean up

---
 .../infinite-scroll-content/infinite-scroll-content.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 9bdf7f534bf..726827f5441 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -52,7 +52,7 @@ export class InfiniteScrollContent implements ComponentInterface {
   private renderLoadingText() {
     const { customHTMLEnabled, loadingText } = this;
     if (customHTMLEnabled) {
-      return <div class="infinite-loading-text" innerHTML={sanitizeDOMString(loadingText)} />;
+      return <div class="infinite-loading-text" innerHTML={sanitizeDOMString(loadingText)}></div>;
     }
 
     return <div class="infinite-loading-text">{this.loadingText}</div>;

From 2764308072db976a50484d7eb15ad27c588ccf02 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 16:01:34 +0000
Subject: [PATCH 07/12] implement for alert

---
 core/src/components/alert/alert.tsx          | 18 ++++++++++++-
 core/src/components/alert/test/alert.spec.ts | 28 ++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 core/src/components/alert/test/alert.spec.ts

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 2bbc1d02358..fbe8fcdf46d 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -1,6 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
 
+import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type {
   AlertButton,
@@ -12,6 +13,7 @@ import type {
   OverlayEventDetail,
   OverlayInterface,
 } from '../../interface';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
 import type { Gesture } from '../../utils/gesture';
 import { createButtonActiveGesture } from '../../utils/gesture/button-active';
 import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
@@ -39,6 +41,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class Alert implements ComponentInterface, OverlayInterface {
+  private customHTMLEnabled = config.get('enableHTMLContent', ENABLE_HTML_CONTENT_DEFAULT);
   private activeId?: string;
   private inputType?: string;
   private processedInputs: AlertInput[] = [];
@@ -584,6 +587,19 @@ export class Alert implements ComponentInterface, OverlayInterface {
     );
   }
 
+  private renderAlertMessage(msgId: string) {
+    const { customHTMLEnabled, message } = this;
+    if (customHTMLEnabled) {
+      return <div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(message)}></div>;
+    }
+
+    return (
+      <div id={msgId} class="alert-message">
+        {message}
+      </div>
+    );
+  }
+
   render() {
     const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
     const mode = getIonMode(this);
@@ -636,7 +652,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
             )}
           </div>
 
-          <div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(message)}></div>
+          {this.renderAlertMessage(msgId)}
 
           {this.renderAlertInputs()}
           {this.renderAlertButtons()}
diff --git a/core/src/components/alert/test/alert.spec.ts b/core/src/components/alert/test/alert.spec.ts
new file mode 100644
index 00000000000..bb748f9ae7c
--- /dev/null
+++ b/core/src/components/alert/test/alert.spec.ts
@@ -0,0 +1,28 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Alert } from '../alert';
+import { config } from '../../../global/config';
+
+describe('alert: custom html', () => {
+  it('should allow for custom html by default', async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+    });
+
+    const content = page.body.querySelector('.alert-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+
+  it('should not allow for custom html', async () => {
+    config.reset({ enableHTMLContent: false });
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+    });
+
+    const content = page.body.querySelector('.alert-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+});

From d2f930c32693fb815381f68e650346b5be17a1d2 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 16:04:31 +0000
Subject: [PATCH 08/12] implement for loading

---
 core/src/components/loading/loading.tsx       | 19 +++++++++++--
 .../components/loading/test/loading.spec.ts   | 28 +++++++++++++++++++
 2 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 core/src/components/loading/test/loading.spec.ts

diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index 483d25641ad..845580e55e6 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -10,6 +10,7 @@ import type {
   OverlayInterface,
   SpinnerTypes,
 } from '../../interface';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
 import { BACKDROP, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
 import type { IonicSafeString } from '../../utils/sanitization';
 import { sanitizeDOMString } from '../../utils/sanitization';
@@ -34,6 +35,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class Loading implements ComponentInterface, OverlayInterface {
+  private customHTMLEnabled = config.get('enableHTMLContent', ENABLE_HTML_CONTENT_DEFAULT);
   private durationTimeout?: ReturnType<typeof setTimeout>;
 
   presented = false;
@@ -192,6 +194,19 @@ export class Loading implements ComponentInterface, OverlayInterface {
     this.dismiss(undefined, BACKDROP);
   };
 
+  private renderLoadingMessage(msgId: string) {
+    const { customHTMLEnabled, message } = this;
+    if (customHTMLEnabled) {
+      return <div class="loading-content" id={msgId} innerHTML={sanitizeDOMString(message)}></div>;
+    }
+
+    return (
+      <div class="loading-content" id={msgId}>
+        {message}
+      </div>
+    );
+  }
+
   render() {
     const { message, spinner, htmlAttributes, overlayIndex } = this;
     const mode = getIonMode(this);
@@ -231,9 +246,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
             </div>
           )}
 
-          {message !== undefined && (
-            <div class="loading-content" id={msgId} innerHTML={sanitizeDOMString(message)}></div>
-          )}
+          {message !== undefined && this.renderLoadingMessage(msgId)}
         </div>
 
         <div tabindex="0"></div>
diff --git a/core/src/components/loading/test/loading.spec.ts b/core/src/components/loading/test/loading.spec.ts
new file mode 100644
index 00000000000..94191ecdb2a
--- /dev/null
+++ b/core/src/components/loading/test/loading.spec.ts
@@ -0,0 +1,28 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Loading } from '../loading';
+import { config } from '../../../global/config';
+
+describe('alert: custom html', () => {
+  it('should allow for custom html by default', async () => {
+    const page = await newSpecPage({
+      components: [Loading],
+      html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
+    });
+
+    const content = page.body.querySelector('.loading-content');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+
+  it('should not allow for custom html', async () => {
+    config.reset({ enableHTMLContent: false });
+    const page = await newSpecPage({
+      components: [Loading],
+      html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
+    });
+
+    const content = page.body.querySelector('.loading-content');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+});

From c697d0692343e5c8175eb0329d989ef53080680e Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 16:07:27 +0000
Subject: [PATCH 09/12] implement for toast

---
 core/src/components/toast/test/toast.spec.ts | 30 ++++++++++++++++++++
 core/src/components/toast/toast.tsx          | 19 +++++++++++--
 2 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 core/src/components/toast/test/toast.spec.ts

diff --git a/core/src/components/toast/test/toast.spec.ts b/core/src/components/toast/test/toast.spec.ts
new file mode 100644
index 00000000000..67a70000375
--- /dev/null
+++ b/core/src/components/toast/test/toast.spec.ts
@@ -0,0 +1,30 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Toast } from '../toast';
+import { config } from '../../../global/config';
+
+describe('alert: custom html', () => {
+  it('should allow for custom html by default', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
+    });
+
+    const toast = page.body.querySelector('ion-toast');
+    const content = toast.shadowRoot.querySelector('.toast-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+
+  it('should not allow for custom html', async () => {
+    config.reset({ enableHTMLContent: false });
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
+    });
+
+    const toast = page.body.querySelector('ion-toast');
+    const content = toast.shadowRoot.querySelector('.toast-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).toBe(null);
+  });
+});
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index be7cb43cf28..298435ea1a0 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -11,6 +11,7 @@ import type {
   OverlayInterface,
   ToastButton,
 } from '../../interface';
+import { ENABLE_HTML_CONTENT_DEFAULT } from '../../utils/config';
 import { printIonWarning } from '../../utils/logging';
 import { dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
 import type { IonicSafeString } from '../../utils/sanitization';
@@ -43,6 +44,7 @@ import type { ToastAttributes, ToastPosition, ToastLayout } from './toast-interf
   shadow: true,
 })
 export class Toast implements ComponentInterface, OverlayInterface {
+  private customHTMLEnabled = config.get('enableHTMLContent', ENABLE_HTML_CONTENT_DEFAULT);
   private durationTimeout?: ReturnType<typeof setTimeout>;
 
   presented = false;
@@ -303,6 +305,19 @@ export class Toast implements ComponentInterface, OverlayInterface {
     );
   }
 
+  private renderToastMessage() {
+    const { customHTMLEnabled, message } = this;
+    if (customHTMLEnabled) {
+      return <div class="toast-message" part="message" innerHTML={sanitizeDOMString(message)}></div>;
+    }
+
+    return (
+      <div class="toast-message" part="message">
+        {message}
+      </div>
+    );
+  }
+
   render() {
     const { layout, el } = this;
     const allButtons = this.getButtons();
@@ -359,9 +374,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
                   {this.header}
                 </div>
               )}
-              {this.message !== undefined && (
-                <div class="toast-message" part="message" innerHTML={sanitizeDOMString(this.message)}></div>
-              )}
+              {this.message !== undefined && this.renderToastMessage()}
             </div>
 
             {this.renderButtons(endButtons, 'end')}

From 4601afad49522f51f90f4565f32419c15a468198 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 14 Mar 2023 16:09:57 +0000
Subject: [PATCH 10/12] add test cases for true config

---
 core/src/components/alert/test/alert.spec.ts     | 12 ++++++++++++
 .../test/infinite-scroll-content.spec.ts         | 12 ++++++++++++
 core/src/components/loading/test/loading.spec.ts | 12 ++++++++++++
 .../test/refresher-content.spec.ts               | 16 ++++++++++++++++
 core/src/components/toast/test/toast.spec.ts     | 13 +++++++++++++
 5 files changed, 65 insertions(+)

diff --git a/core/src/components/alert/test/alert.spec.ts b/core/src/components/alert/test/alert.spec.ts
index bb748f9ae7c..0c62cc1a968 100644
--- a/core/src/components/alert/test/alert.spec.ts
+++ b/core/src/components/alert/test/alert.spec.ts
@@ -14,6 +14,18 @@ describe('alert: custom html', () => {
     expect(content.querySelector('button.custom-html')).not.toBe(null);
   });
 
+  it('should allow for custom html', async () => {
+    config.reset({ enableHTMLContent: true });
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
+    });
+
+    const content = page.body.querySelector('.alert-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+
   it('should not allow for custom html', async () => {
     config.reset({ enableHTMLContent: false });
     const page = await newSpecPage({
diff --git a/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
index dfd585309c7..9eeb54b33a4 100644
--- a/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
+++ b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
@@ -14,6 +14,18 @@ describe('infinite-scroll-content: custom html', () => {
     expect(content.querySelector('button.custom-html')).not.toBe(null);
   });
 
+  it('should allow for custom html', async () => {
+    config.reset({ enableHTMLContent: true });
+    const page = await newSpecPage({
+      components: [InfiniteScrollContent],
+      html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text</button>"></ion-infinite-scroll-content>`,
+    });
+
+    const content = page.body.querySelector('.infinite-loading-text');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+
   it('should not allow for custom html', async () => {
     config.reset({ enableHTMLContent: false });
     const page = await newSpecPage({
diff --git a/core/src/components/loading/test/loading.spec.ts b/core/src/components/loading/test/loading.spec.ts
index 94191ecdb2a..5ccd6d3dcc7 100644
--- a/core/src/components/loading/test/loading.spec.ts
+++ b/core/src/components/loading/test/loading.spec.ts
@@ -14,6 +14,18 @@ describe('alert: custom html', () => {
     expect(content.querySelector('button.custom-html')).not.toBe(null);
   });
 
+  it('should allow for custom html', async () => {
+    config.reset({ enableHTMLContent: true });
+    const page = await newSpecPage({
+      components: [Loading],
+      html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
+    });
+
+    const content = page.body.querySelector('.loading-content');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+
   it('should not allow for custom html', async () => {
     config.reset({ enableHTMLContent: false });
     const page = await newSpecPage({
diff --git a/core/src/components/refresher-content/test/refresher-content.spec.ts b/core/src/components/refresher-content/test/refresher-content.spec.ts
index b46a5086681..117941c340b 100644
--- a/core/src/components/refresher-content/test/refresher-content.spec.ts
+++ b/core/src/components/refresher-content/test/refresher-content.spec.ts
@@ -18,6 +18,22 @@ describe('refresher-content: custom html', () => {
     expect(refreshingContent.querySelector('button.custom-refreshing-html')).not.toBe(null);
   });
 
+  it('should allow for custom html', async () => {
+    config.reset({ enableHTMLContent: true });
+    const page = await newSpecPage({
+      components: [RefresherContent],
+      html: `<ion-refresher-content pulling-text="<button class='custom-pulling-html'>Custom Pulling Text</button>" refreshing-text="<button class='custom-refreshing-html'>Custom Refreshing Text</button>"></ion-refresher-content>`,
+    });
+
+    const pullingContent = page.body.querySelector('.refresher-pulling-text');
+    expect(pullingContent.textContent).toContain('Custom Pulling Text');
+    expect(pullingContent.querySelector('button.custom-pulling-html')).not.toBe(null);
+
+    const refreshingContent = page.body.querySelector('.refresher-refreshing-text');
+    expect(refreshingContent.textContent).toContain('Custom Refreshing Text');
+    expect(refreshingContent.querySelector('button.custom-refreshing-html')).not.toBe(null);
+  });
+
   it('should not allow for custom html', async () => {
     config.reset({ enableHTMLContent: false });
     const page = await newSpecPage({
diff --git a/core/src/components/toast/test/toast.spec.ts b/core/src/components/toast/test/toast.spec.ts
index 67a70000375..4975b8b27b1 100644
--- a/core/src/components/toast/test/toast.spec.ts
+++ b/core/src/components/toast/test/toast.spec.ts
@@ -15,6 +15,19 @@ describe('alert: custom html', () => {
     expect(content.querySelector('button.custom-html')).not.toBe(null);
   });
 
+  it('should allow for custom html', async () => {
+    config.reset({ enableHTMLContent: true });
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
+    });
+
+    const toast = page.body.querySelector('ion-toast');
+    const content = toast.shadowRoot.querySelector('.toast-message');
+    expect(content.textContent).toContain('Custom Text');
+    expect(content.querySelector('button.custom-html')).not.toBe(null);
+  });
+
   it('should not allow for custom html', async () => {
     config.reset({ enableHTMLContent: false });
     const page = await newSpecPage({

From f13d4feabcf7ab9f95cac4be8309415bd4f55a2d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 20 Mar 2023 15:20:00 -0400
Subject: [PATCH 11/12] refactor(): rename to enableInnerHTMLTemplates

---
 core/src/components.d.ts                      | 24 +++++++++----------
 core/src/components/alert/alert.tsx           |  4 ++--
 core/src/components/alert/test/alert.spec.ts  |  4 ++--
 .../infinite-scroll-content.tsx               |  4 ++--
 .../test/infinite-scroll-content.spec.ts      |  4 ++--
 core/src/components/loading/loading.tsx       |  4 ++--
 .../components/loading/test/loading.spec.ts   |  4 ++--
 .../refresher-content/refresher-content.tsx   |  6 ++---
 .../test/refresher-content.spec.ts            |  4 ++--
 core/src/components/toast/test/toast.spec.ts  |  4 ++--
 core/src/components/toast/toast.tsx           |  4 ++--
 core/src/utils/config.ts                      |  2 +-
 12 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index ae33e2437b8..ae7a948d0bd 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -192,7 +192,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -1039,7 +1039,7 @@ export namespace Components {
          */
         "loadingSpinner"?: SpinnerTypes | null;
         /**
-          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "loadingText"?: string | IonicSafeString;
     }
@@ -1422,7 +1422,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -2221,7 +2221,7 @@ export namespace Components {
          */
         "pullingIcon"?: SpinnerTypes | string | null;
         /**
-          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "pullingText"?: string | IonicSafeString;
         /**
@@ -2229,7 +2229,7 @@ export namespace Components {
          */
         "refreshingSpinner"?: SpinnerTypes | null;
         /**
-          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "refreshingText"?: string | IonicSafeString;
     }
@@ -2990,7 +2990,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -4147,7 +4147,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -5045,7 +5045,7 @@ declare namespace LocalJSX {
          */
         "loadingSpinner"?: SpinnerTypes | null;
         /**
-          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "loadingText"?: string | IonicSafeString;
     }
@@ -5420,7 +5420,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -6188,7 +6188,7 @@ declare namespace LocalJSX {
          */
         "pullingIcon"?: SpinnerTypes | string | null;
         /**
-          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "pullingText"?: string | IonicSafeString;
         /**
@@ -6196,7 +6196,7 @@ declare namespace LocalJSX {
          */
         "refreshingSpinner"?: SpinnerTypes | null;
         /**
-          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "refreshingText"?: string | IonicSafeString;
     }
@@ -6999,7 +6999,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableHTMLContent: false` in the Ionic config.
+          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index fbe8fcdf46d..9863d87b170 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -41,7 +41,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class Alert implements ComponentInterface, OverlayInterface {
-  private customHTMLEnabled = config.get('enableHTMLContent', ENABLE_HTML_CONTENT_DEFAULT);
+  private customHTMLEnabled = config.get('enableInnerHTMLTemplates', ENABLE_HTML_CONTENT_DEFAULT);
   private activeId?: string;
   private inputType?: string;
   private processedInputs: AlertInput[] = [];
@@ -100,7 +100,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableHTMLContent: false` in the Ionic config.
+   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
    */
   @Prop() message?: string | IonicSafeString;
 
diff --git a/core/src/components/alert/test/alert.spec.ts b/core/src/components/alert/test/alert.spec.ts
index 0c62cc1a968..d6aec3e25fb 100644
--- a/core/src/components/alert/test/alert.spec.ts
+++ b/core/src/components/alert/test/alert.spec.ts
@@ -15,7 +15,7 @@ describe('alert: custom html', () => {
   });
 
   it('should allow for custom html', async () => {
-    config.reset({ enableHTMLContent: true });
+    config.reset({ enableInnerHTMLTemplates: true });
     const page = await newSpecPage({
       components: [Alert],
       html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
@@ -27,7 +27,7 @@ describe('alert: custom html', () => {
   });
 
   it('should not allow for custom html', async () => {
-    config.reset({ enableHTMLContent: false });
+    config.reset({ enableInnerHTMLTemplates: false });
     const page = await newSpecPage({
       components: [Alert],
       html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 726827f5441..45f92722917 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -16,7 +16,7 @@ import { sanitizeDOMString } from '../../utils/sanitization';
   },
 })
 export class InfiniteScrollContent implements ComponentInterface {
-  private customHTMLEnabled = config.get('enableHTMLContent', ENABLE_HTML_CONTENT_DEFAULT);
+  private customHTMLEnabled = config.get('enableInnerHTMLTemplates', ENABLE_HTML_CONTENT_DEFAULT);
 
   /**
    * An animated SVG spinner that shows while loading.
@@ -35,7 +35,7 @@ export class InfiniteScrollContent implements ComponentInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableHTMLContent: false` in the Ionic config.
+   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
    */
   @Prop() loadingText?: string | IonicSafeString;
 
diff --git a/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
index 9eeb54b33a4..7ab55be04be 100644
--- a/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
+++ b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
@@ -15,7 +15,7 @@ describe('infinite-scroll-content: custom html', () => {
   });
 
   it('should allow for custom html', async () => {
-    config.reset({ enableHTMLContent: true });
+    config.reset({ enableInnerHTMLTemplates: true });
     const page = await newSpecPage({
       components: [InfiniteScrollContent],
       html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text</button>"></ion-infinite-scroll-content>`,
@@ -27,7 +27,7 @@ describe('infinite-scroll-content: custom html', () => {
   });
 
   it('should not allow for custom html', async () => {
-    config.reset({ enableHTMLContent: false });
+    config.reset({ enableInnerHTMLTemplates: false });
     const page = await newSpecPage({
       components: [InfiniteScrollContent],
       html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text2</button>"></ion-infinite-scroll-content>`,
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index 845580e55e6..d91497d13c8 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -35,7 +35,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class Loading implements ComponentInterface, OverlayInterface {
-  private customHTMLEnabled = config.get('enableHTMLContent', ENABLE_HTML_CONTENT_DEFAULT);
+  private customHTMLEnabled = config.get('enableInnerHTMLTemplates', ENABLE_HTML_CONTENT_DEFAULT);
   private durationTimeout?: ReturnType<typeof setTimeout>;
 
   presented = false;
@@ -67,7 +67,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableHTMLContent: false` in the Ionic config.
+   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
    */
   @Prop() message?: string | IonicSafeString;
 
diff --git a/core/src/components/loading/test/loading.spec.ts b/core/src/components/loading/test/loading.spec.ts
index 5ccd6d3dcc7..cde72f65e06 100644
--- a/core/src/components/loading/test/loading.spec.ts
+++ b/core/src/components/loading/test/loading.spec.ts
@@ -15,7 +15,7 @@ describe('alert: custom html', () => {
   });
 
   it('should allow for custom html', async () => {
-    config.reset({ enableHTMLContent: true });
+    config.reset({ enableInnerHTMLTemplates: true });
     const page = await newSpecPage({
       components: [Loading],
       html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
@@ -27,7 +27,7 @@ describe('alert: custom html', () => {
   });
 
   it('should not allow for custom html', async () => {
-    config.reset({ enableHTMLContent: false });
+    config.reset({ enableInnerHTMLTemplates: false });
     const page = await newSpecPage({
       components: [Loading],
       html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index 9d139362a07..d8bf8b6cad6 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -15,7 +15,7 @@ import { SPINNERS } from '../spinner/spinner-configs';
   tag: 'ion-refresher-content',
 })
 export class RefresherContent implements ComponentInterface {
-  private customHTMLEnabled = config.get('enableHTMLContent', ENABLE_HTML_CONTENT_DEFAULT);
+  private customHTMLEnabled = config.get('enableInnerHTMLTemplates', ENABLE_HTML_CONTENT_DEFAULT);
 
   @Element() el!: HTMLIonRefresherContentElement;
 
@@ -38,7 +38,7 @@ export class RefresherContent implements ComponentInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableHTMLContent: false` in the Ionic config.
+   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
    */
   @Prop() pullingText?: string | IonicSafeString;
 
@@ -59,7 +59,7 @@ export class RefresherContent implements ComponentInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableHTMLContent: false` in the Ionic config.
+   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
    */
   @Prop() refreshingText?: string | IonicSafeString;
 
diff --git a/core/src/components/refresher-content/test/refresher-content.spec.ts b/core/src/components/refresher-content/test/refresher-content.spec.ts
index 117941c340b..5a839c1b929 100644
--- a/core/src/components/refresher-content/test/refresher-content.spec.ts
+++ b/core/src/components/refresher-content/test/refresher-content.spec.ts
@@ -19,7 +19,7 @@ describe('refresher-content: custom html', () => {
   });
 
   it('should allow for custom html', async () => {
-    config.reset({ enableHTMLContent: true });
+    config.reset({ enableInnerHTMLTemplates: true });
     const page = await newSpecPage({
       components: [RefresherContent],
       html: `<ion-refresher-content pulling-text="<button class='custom-pulling-html'>Custom Pulling Text</button>" refreshing-text="<button class='custom-refreshing-html'>Custom Refreshing Text</button>"></ion-refresher-content>`,
@@ -35,7 +35,7 @@ describe('refresher-content: custom html', () => {
   });
 
   it('should not allow for custom html', async () => {
-    config.reset({ enableHTMLContent: false });
+    config.reset({ enableInnerHTMLTemplates: false });
     const page = await newSpecPage({
       components: [RefresherContent],
       html: `<ion-refresher-content pulling-text="<button class='custom-pulling-html'>Custom Pulling Text</button>" refreshing-text="<button class='custom-html'>Custom Refreshing Text</button>"></ion-refresher-content>`,
diff --git a/core/src/components/toast/test/toast.spec.ts b/core/src/components/toast/test/toast.spec.ts
index 4975b8b27b1..2c741ba64e6 100644
--- a/core/src/components/toast/test/toast.spec.ts
+++ b/core/src/components/toast/test/toast.spec.ts
@@ -16,7 +16,7 @@ describe('alert: custom html', () => {
   });
 
   it('should allow for custom html', async () => {
-    config.reset({ enableHTMLContent: true });
+    config.reset({ enableInnerHTMLTemplates: true });
     const page = await newSpecPage({
       components: [Toast],
       html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
@@ -29,7 +29,7 @@ describe('alert: custom html', () => {
   });
 
   it('should not allow for custom html', async () => {
-    config.reset({ enableHTMLContent: false });
+    config.reset({ enableInnerHTMLTemplates: false });
     const page = await newSpecPage({
       components: [Toast],
       html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 298435ea1a0..0dd6d32bb91 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -44,7 +44,7 @@ import type { ToastAttributes, ToastPosition, ToastLayout } from './toast-interf
   shadow: true,
 })
 export class Toast implements ComponentInterface, OverlayInterface {
-  private customHTMLEnabled = config.get('enableHTMLContent', ENABLE_HTML_CONTENT_DEFAULT);
+  private customHTMLEnabled = config.get('enableInnerHTMLTemplates', ENABLE_HTML_CONTENT_DEFAULT);
   private durationTimeout?: ReturnType<typeof setTimeout>;
 
   presented = false;
@@ -104,7 +104,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableHTMLContent: false` in the Ionic config.
+   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
    */
   @Prop() message?: string | IonicSafeString;
 
diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index 4159242b85b..6c3589623d7 100644
--- a/core/src/utils/config.ts
+++ b/core/src/utils/config.ts
@@ -193,7 +193,7 @@ export interface IonicConfig {
    * custom HTML will not be usable in the relevant components.
    * `innerHTML` usage is enabled by default.
    */
-  enableHTMLContent?: boolean;
+  enableInnerHTMLTemplates?: boolean;
 
   /**
    * Overrides the default platform detection methods.

From 430e6b96f23f076aad20ee6eca1d926b6898585a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 22 Mar 2023 10:44:10 -0400
Subject: [PATCH 12/12] refactor(): rename to innerHTMLTemplatesEnabled

---
 core/src/components.d.ts                      | 24 +++++++++----------
 core/src/components/alert/alert.tsx           |  4 ++--
 core/src/components/alert/test/alert.spec.ts  |  4 ++--
 .../infinite-scroll-content.tsx               |  4 ++--
 .../test/infinite-scroll-content.spec.ts      |  4 ++--
 core/src/components/loading/loading.tsx       |  4 ++--
 .../components/loading/test/loading.spec.ts   |  4 ++--
 .../refresher-content/refresher-content.tsx   |  6 ++---
 .../test/refresher-content.spec.ts            |  4 ++--
 core/src/components/toast/test/toast.spec.ts  |  4 ++--
 core/src/components/toast/toast.tsx           |  4 ++--
 core/src/utils/config.ts                      |  2 +-
 12 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index ae7a948d0bd..72ef2f85169 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -192,7 +192,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -1039,7 +1039,7 @@ export namespace Components {
          */
         "loadingSpinner"?: SpinnerTypes | null;
         /**
-          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "loadingText"?: string | IonicSafeString;
     }
@@ -1422,7 +1422,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -2221,7 +2221,7 @@ export namespace Components {
          */
         "pullingIcon"?: SpinnerTypes | string | null;
         /**
-          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "pullingText"?: string | IonicSafeString;
         /**
@@ -2229,7 +2229,7 @@ export namespace Components {
          */
         "refreshingSpinner"?: SpinnerTypes | null;
         /**
-          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "refreshingText"?: string | IonicSafeString;
     }
@@ -2990,7 +2990,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -4147,7 +4147,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -5045,7 +5045,7 @@ declare namespace LocalJSX {
          */
         "loadingSpinner"?: SpinnerTypes | null;
         /**
-          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "loadingText"?: string | IonicSafeString;
     }
@@ -5420,7 +5420,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
@@ -6188,7 +6188,7 @@ declare namespace LocalJSX {
          */
         "pullingIcon"?: SpinnerTypes | string | null;
         /**
-          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "pullingText"?: string | IonicSafeString;
         /**
@@ -6196,7 +6196,7 @@ declare namespace LocalJSX {
          */
         "refreshingSpinner"?: SpinnerTypes | null;
         /**
-          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "refreshingText"?: string | IonicSafeString;
     }
@@ -6999,7 +6999,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+          * Message to be shown in the toast. This property accepts custom HTML as a string. Developers who only want to pass plain text can disable the custom HTML functionality by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
          */
         "message"?: string | IonicSafeString;
         /**
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 9863d87b170..c8d9a0b4482 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -41,7 +41,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class Alert implements ComponentInterface, OverlayInterface {
-  private customHTMLEnabled = config.get('enableInnerHTMLTemplates', ENABLE_HTML_CONTENT_DEFAULT);
+  private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
   private activeId?: string;
   private inputType?: string;
   private processedInputs: AlertInput[] = [];
@@ -100,7 +100,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+   * by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
    */
   @Prop() message?: string | IonicSafeString;
 
diff --git a/core/src/components/alert/test/alert.spec.ts b/core/src/components/alert/test/alert.spec.ts
index d6aec3e25fb..af4e6543f18 100644
--- a/core/src/components/alert/test/alert.spec.ts
+++ b/core/src/components/alert/test/alert.spec.ts
@@ -15,7 +15,7 @@ describe('alert: custom html', () => {
   });
 
   it('should allow for custom html', async () => {
-    config.reset({ enableInnerHTMLTemplates: true });
+    config.reset({ innerHTMLTemplatesEnabled: true });
     const page = await newSpecPage({
       components: [Alert],
       html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
@@ -27,7 +27,7 @@ describe('alert: custom html', () => {
   });
 
   it('should not allow for custom html', async () => {
-    config.reset({ enableInnerHTMLTemplates: false });
+    config.reset({ innerHTMLTemplatesEnabled: false });
     const page = await newSpecPage({
       components: [Alert],
       html: `<ion-alert message="<button class='custom-html'>Custom Text</button>"></ion-alert>`,
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 45f92722917..bb5fa26f647 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -16,7 +16,7 @@ import { sanitizeDOMString } from '../../utils/sanitization';
   },
 })
 export class InfiniteScrollContent implements ComponentInterface {
-  private customHTMLEnabled = config.get('enableInnerHTMLTemplates', ENABLE_HTML_CONTENT_DEFAULT);
+  private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
 
   /**
    * An animated SVG spinner that shows while loading.
@@ -35,7 +35,7 @@ export class InfiniteScrollContent implements ComponentInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+   * by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
    */
   @Prop() loadingText?: string | IonicSafeString;
 
diff --git a/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
index 7ab55be04be..af66a7694f0 100644
--- a/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
+++ b/core/src/components/infinite-scroll-content/test/infinite-scroll-content.spec.ts
@@ -15,7 +15,7 @@ describe('infinite-scroll-content: custom html', () => {
   });
 
   it('should allow for custom html', async () => {
-    config.reset({ enableInnerHTMLTemplates: true });
+    config.reset({ innerHTMLTemplatesEnabled: true });
     const page = await newSpecPage({
       components: [InfiniteScrollContent],
       html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text</button>"></ion-infinite-scroll-content>`,
@@ -27,7 +27,7 @@ describe('infinite-scroll-content: custom html', () => {
   });
 
   it('should not allow for custom html', async () => {
-    config.reset({ enableInnerHTMLTemplates: false });
+    config.reset({ innerHTMLTemplatesEnabled: false });
     const page = await newSpecPage({
       components: [InfiniteScrollContent],
       html: `<ion-infinite-scroll-content loading-text="<button class='custom-html'>Custom Text2</button>"></ion-infinite-scroll-content>`,
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index d91497d13c8..a6a7890728b 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -35,7 +35,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   scoped: true,
 })
 export class Loading implements ComponentInterface, OverlayInterface {
-  private customHTMLEnabled = config.get('enableInnerHTMLTemplates', ENABLE_HTML_CONTENT_DEFAULT);
+  private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
   private durationTimeout?: ReturnType<typeof setTimeout>;
 
   presented = false;
@@ -67,7 +67,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+   * by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
    */
   @Prop() message?: string | IonicSafeString;
 
diff --git a/core/src/components/loading/test/loading.spec.ts b/core/src/components/loading/test/loading.spec.ts
index cde72f65e06..af9b15ac0db 100644
--- a/core/src/components/loading/test/loading.spec.ts
+++ b/core/src/components/loading/test/loading.spec.ts
@@ -15,7 +15,7 @@ describe('alert: custom html', () => {
   });
 
   it('should allow for custom html', async () => {
-    config.reset({ enableInnerHTMLTemplates: true });
+    config.reset({ innerHTMLTemplatesEnabled: true });
     const page = await newSpecPage({
       components: [Loading],
       html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
@@ -27,7 +27,7 @@ describe('alert: custom html', () => {
   });
 
   it('should not allow for custom html', async () => {
-    config.reset({ enableInnerHTMLTemplates: false });
+    config.reset({ innerHTMLTemplatesEnabled: false });
     const page = await newSpecPage({
       components: [Loading],
       html: `<ion-loading message="<button class='custom-html'>Custom Text</button>"></ion-loading>`,
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index d8bf8b6cad6..75870e2cf49 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -15,7 +15,7 @@ import { SPINNERS } from '../spinner/spinner-configs';
   tag: 'ion-refresher-content',
 })
 export class RefresherContent implements ComponentInterface {
-  private customHTMLEnabled = config.get('enableInnerHTMLTemplates', ENABLE_HTML_CONTENT_DEFAULT);
+  private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
 
   @Element() el!: HTMLIonRefresherContentElement;
 
@@ -38,7 +38,7 @@ export class RefresherContent implements ComponentInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+   * by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
    */
   @Prop() pullingText?: string | IonicSafeString;
 
@@ -59,7 +59,7 @@ export class RefresherContent implements ComponentInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+   * by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
    */
   @Prop() refreshingText?: string | IonicSafeString;
 
diff --git a/core/src/components/refresher-content/test/refresher-content.spec.ts b/core/src/components/refresher-content/test/refresher-content.spec.ts
index 5a839c1b929..bdf6832e94d 100644
--- a/core/src/components/refresher-content/test/refresher-content.spec.ts
+++ b/core/src/components/refresher-content/test/refresher-content.spec.ts
@@ -19,7 +19,7 @@ describe('refresher-content: custom html', () => {
   });
 
   it('should allow for custom html', async () => {
-    config.reset({ enableInnerHTMLTemplates: true });
+    config.reset({ innerHTMLTemplatesEnabled: true });
     const page = await newSpecPage({
       components: [RefresherContent],
       html: `<ion-refresher-content pulling-text="<button class='custom-pulling-html'>Custom Pulling Text</button>" refreshing-text="<button class='custom-refreshing-html'>Custom Refreshing Text</button>"></ion-refresher-content>`,
@@ -35,7 +35,7 @@ describe('refresher-content: custom html', () => {
   });
 
   it('should not allow for custom html', async () => {
-    config.reset({ enableInnerHTMLTemplates: false });
+    config.reset({ innerHTMLTemplatesEnabled: false });
     const page = await newSpecPage({
       components: [RefresherContent],
       html: `<ion-refresher-content pulling-text="<button class='custom-pulling-html'>Custom Pulling Text</button>" refreshing-text="<button class='custom-html'>Custom Refreshing Text</button>"></ion-refresher-content>`,
diff --git a/core/src/components/toast/test/toast.spec.ts b/core/src/components/toast/test/toast.spec.ts
index 2c741ba64e6..44ef078dfc1 100644
--- a/core/src/components/toast/test/toast.spec.ts
+++ b/core/src/components/toast/test/toast.spec.ts
@@ -16,7 +16,7 @@ describe('alert: custom html', () => {
   });
 
   it('should allow for custom html', async () => {
-    config.reset({ enableInnerHTMLTemplates: true });
+    config.reset({ innerHTMLTemplatesEnabled: true });
     const page = await newSpecPage({
       components: [Toast],
       html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
@@ -29,7 +29,7 @@ describe('alert: custom html', () => {
   });
 
   it('should not allow for custom html', async () => {
-    config.reset({ enableInnerHTMLTemplates: false });
+    config.reset({ innerHTMLTemplatesEnabled: false });
     const page = await newSpecPage({
       components: [Toast],
       html: `<ion-toast message="<button class='custom-html'>Custom Text</button>"></ion-toast>`,
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 0dd6d32bb91..6ee79775f63 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -44,7 +44,7 @@ import type { ToastAttributes, ToastPosition, ToastLayout } from './toast-interf
   shadow: true,
 })
 export class Toast implements ComponentInterface, OverlayInterface {
-  private customHTMLEnabled = config.get('enableInnerHTMLTemplates', ENABLE_HTML_CONTENT_DEFAULT);
+  private customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
   private durationTimeout?: ReturnType<typeof setTimeout>;
 
   presented = false;
@@ -104,7 +104,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
    * This property accepts custom HTML as a string.
    * Developers who only want to pass plain text
    * can disable the custom HTML functionality
-   * by setting `enableInnerHTMLTemplates: false` in the Ionic config.
+   * by setting `innerHTMLTemplatesEnabled: false` in the Ionic config.
    */
   @Prop() message?: string | IonicSafeString;
 
diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index 6c3589623d7..70f2646cc8c 100644
--- a/core/src/utils/config.ts
+++ b/core/src/utils/config.ts
@@ -193,7 +193,7 @@ export interface IonicConfig {
    * custom HTML will not be usable in the relevant components.
    * `innerHTML` usage is enabled by default.
    */
-  enableInnerHTMLTemplates?: boolean;
+  innerHTMLTemplatesEnabled?: boolean;
 
   /**
    * Overrides the default platform detection methods.