diff --git a/src/components.d.ts b/src/components.d.ts
index 64f7b8499..d24047666 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -194,7 +194,7 @@ export namespace Components {
          */
         "show": () => Promise<boolean>;
         /**
-          * The summary to show in the details header.
+          * The summary to show in the details header. If you need to display HTML, use the `summary` slot instead.
          */
         "summary": string;
     }
@@ -1376,7 +1376,7 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
         /**
-          * The summary to show in the details header.
+          * The summary to show in the details header. If you need to display HTML, use the `summary` slot instead.
          */
         "summary"?: string;
     }
diff --git a/src/components/details/details.tsx b/src/components/details/details.tsx
index 039187c77..9efef3bff 100644
--- a/src/components/details/details.tsx
+++ b/src/components/details/details.tsx
@@ -31,7 +31,7 @@ export class Details {
   /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
   @Prop({ mutable: true, reflect: true }) open = false;
 
-  /** The summary to show in the details header. */
+  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
   @Prop() summary = '';
 
   /** Set to true to prevent the user from toggling the details. */