diff --git a/frontend/demo/component/dialog/dialog-basic.ts b/frontend/demo/component/dialog/dialog-basic.ts
index dbc3c2c088..ab3e2079e0 100644
--- a/frontend/demo/component/dialog/dialog-basic.ts
+++ b/frontend/demo/component/dialog/dialog-basic.ts
@@ -5,7 +5,6 @@ import '@vaadin/form-layout';
 import '@vaadin/text-field';
 import { css, html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
 import { applyTheme } from 'Frontend/demo/theme';
 
 @customElement('dialog-basic')
@@ -42,9 +41,16 @@ export class Example extends LitElement {
         @closed="${() => {
           this.dialogOpened = false;
         }}"
-        ${dialogRenderer(this.renderDialog, [])}
-        ${dialogFooterRenderer(this.renderFooter, [])}
-      ></vaadin-dialog>
+      >
+        <vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
+          <vaadin-text-field label="First name"></vaadin-text-field>
+          <vaadin-text-field label="Last name"></vaadin-text-field>
+        </vaadin-form-layout>
+        <div slot="footer">
+          <vaadin-button @click="${this.close}">Cancel</vaadin-button>
+          <vaadin-button theme="primary" @click="${this.close}">Add</vaadin-button>
+        </div>
+      </vaadin-dialog>
 
       <vaadin-button
         @click="${() => {
@@ -57,18 +63,6 @@ export class Example extends LitElement {
     `;
   }
 
-  private renderDialog = () => html`
-    <vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
-      <vaadin-text-field label="First name"></vaadin-text-field>
-      <vaadin-text-field label="Last name"></vaadin-text-field>
-    </vaadin-form-layout>
-  `;
-
-  private renderFooter = () => html`
-    <vaadin-button @click="${this.close}">Cancel</vaadin-button>
-    <vaadin-button theme="primary" @click="${this.close}">Add</vaadin-button>
-  `;
-
   private close() {
     this.dialogOpened = false;
   }
diff --git a/frontend/demo/component/dialog/dialog-closing.ts b/frontend/demo/component/dialog/dialog-closing.ts
index 13846d0000..26b25ad9eb 100644
--- a/frontend/demo/component/dialog/dialog-closing.ts
+++ b/frontend/demo/component/dialog/dialog-closing.ts
@@ -3,7 +3,6 @@ import '@vaadin/button';
 import '@vaadin/dialog';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
 import { applyTheme } from 'Frontend/demo/theme';
 
 @customElement('dialog-closing')
@@ -26,20 +25,15 @@ export class Example extends LitElement {
         @closed="${() => {
           this.dialogOpened = false;
         }}"
-        ${dialogRenderer(
-          () => html`
-            <p style="max-width: 300px">
-              System maintenance will begin at 3 PM. It is schedule to conclude at 5PM. We apologise
-              for any inconvenience.
-            </p>
-          `,
-          []
-        )}
-        ${dialogFooterRenderer(
-          () => html`<vaadin-button @click="${this.close}">Close</vaadin-button>`,
-          []
-        )}
-      ></vaadin-dialog>
+      >
+        <p style="max-width: 300px">
+          System maintenance will begin at 3 PM. It is schedule to conclude at 5PM. We apologise for
+          any inconvenience.
+        </p>
+        <div slot="footer">
+          <vaadin-button @click="${this.close}">Close</vaadin-button>
+        </div>
+      </vaadin-dialog>
       <!-- end::snippet[] -->
 
       <vaadin-button @click="${this.open}">Show dialog</vaadin-button>
diff --git a/frontend/demo/component/dialog/dialog-draggable.ts b/frontend/demo/component/dialog/dialog-draggable.ts
index eaa3a18842..e7bb12c4a3 100644
--- a/frontend/demo/component/dialog/dialog-draggable.ts
+++ b/frontend/demo/component/dialog/dialog-draggable.ts
@@ -6,7 +6,6 @@ import '@vaadin/text-area';
 import '@vaadin/text-field';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { dialogFooterRenderer, dialogHeaderRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
 import { applyTheme } from 'Frontend/demo/theme';
 
 @customElement('dialog-draggable')
@@ -31,34 +30,24 @@ export class Example extends LitElement {
         @closed="${() => {
           this.dialogOpened = false;
         }}"
-        ${dialogHeaderRenderer(
-          () => html`
-            <h2
-              class="draggable"
-              style="flex: 1; cursor: move; margin: 0; font-size: 1.5em; font-weight: bold; padding: var(--vaadin-gap-m) 0;"
-            >
-              Add note
-            </h2>
-          `,
-          []
-        )}
-        ${dialogRenderer(
-          () => html`
-            <vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
-              <vaadin-text-field label="Title"></vaadin-text-field>
-              <vaadin-text-area label="Description"></vaadin-text-area>
-            </vaadin-form-layout>
-          `,
-          []
-        )}
-        ${dialogFooterRenderer(
-          () => html`
-            <vaadin-button @click="${this.close}">Cancel</vaadin-button>
-            <vaadin-button theme="primary" @click="${this.close}">Add note</vaadin-button>
-          `,
-          []
-        )}
-      ></vaadin-dialog>
+      >
+        <div slot="header-content">
+          <h2
+            class="draggable"
+            style="flex: 1; cursor: move; margin: 0; font-size: 1.5em; font-weight: bold; padding: var(--vaadin-gap-m) 0;"
+          >
+            Add note
+          </h2>
+        </div>
+        <vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
+          <vaadin-text-field label="Title"></vaadin-text-field>
+          <vaadin-text-area label="Description"></vaadin-text-area>
+        </vaadin-form-layout>
+        <div slot="footer">
+          <vaadin-button @click="${this.close}">Cancel</vaadin-button>
+          <vaadin-button theme="primary" @click="${this.close}">Add note</vaadin-button>
+        </div>
+      </vaadin-dialog>
       <!-- end::snippet[] -->
       <vaadin-button @click="${this.open}">Show dialog</vaadin-button>
     `;
diff --git a/frontend/demo/component/dialog/dialog-footer.ts b/frontend/demo/component/dialog/dialog-footer.ts
index c2ea00c387..9f35601616 100644
--- a/frontend/demo/component/dialog/dialog-footer.ts
+++ b/frontend/demo/component/dialog/dialog-footer.ts
@@ -3,7 +3,6 @@ import '@vaadin/button';
 import '@vaadin/dialog';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import { applyTheme } from 'Frontend/demo/theme';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
@@ -36,17 +35,15 @@ export class Example extends LitElement {
         @closed="${() => {
           this.dialogOpened = false;
         }}"
-        ${dialogRenderer(() => html`Are you sure you want to delete this user permanently?`, [])}
-        ${dialogFooterRenderer(
-          () => html`
-            <vaadin-button theme="primary error" @click="${this.close}" style="margin-right: auto;">
-              Delete
-            </vaadin-button>
-            <vaadin-button theme="tertiary" @click="${this.close}">Cancel</vaadin-button>
-          `,
-          []
-        )}
-      ></vaadin-dialog>
+      >
+        <div>Are you sure you want to delete this user permanently?</div>
+        <div slot="footer">
+          <vaadin-button theme="primary error" @click="${this.close}" style="margin-right: auto;">
+            Delete
+          </vaadin-button>
+          <vaadin-button theme="tertiary" @click="${this.close}">Cancel</vaadin-button>
+        </div>
+      </vaadin-dialog>
       <!-- end::snippet[] -->
       <vaadin-button @click="${this.open}">Show dialog</vaadin-button>
     `;
diff --git a/frontend/demo/component/dialog/dialog-header.ts b/frontend/demo/component/dialog/dialog-header.ts
index dde6d0588d..e7437d04c9 100644
--- a/frontend/demo/component/dialog/dialog-header.ts
+++ b/frontend/demo/component/dialog/dialog-header.ts
@@ -9,7 +9,6 @@ import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { dialogHeaderRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import { applyTheme } from 'Frontend/demo/theme';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
@@ -42,42 +41,36 @@ export class Example extends LitElement {
         @closed="${() => {
           this.dialogOpened = false;
         }}"
-        ${dialogHeaderRenderer(
-          () => html`
-            <vaadin-button theme="tertiary" @click="${this.close}">
-              <vaadin-icon icon="lumo:cross"></vaadin-icon>
-            </vaadin-button>
-          `,
-          []
-        )}
-        ${dialogRenderer(this.renderDialog, this.user)}
-      ></vaadin-dialog>
+      >
+        <div slot="header-content">
+          <vaadin-button theme="tertiary" @click="${this.close}">
+            <vaadin-icon icon="lumo:cross"></vaadin-icon>
+          </vaadin-button>
+        </div>
+        <vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
+          <vaadin-text-field
+            label="Name"
+            value="${`${this.user?.firstName} ${this.user?.lastName}`}"
+            readonly
+            style="padding-top: 0;"
+          ></vaadin-text-field>
+          <vaadin-email-field
+            label="Email"
+            value="${ifDefined(this.user?.email)}"
+            readonly
+          ></vaadin-email-field>
+          <vaadin-text-field
+            label="Address"
+            value="${this.addressDescription()}"
+            readonly
+          ></vaadin-text-field>
+        </vaadin-form-layout>
+      </vaadin-dialog>
       <!-- end::snippet[] -->
       <vaadin-button @click="${this.open}">Show dialog</vaadin-button>
     `;
   }
 
-  private renderDialog = () => html`
-    <vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
-      <vaadin-text-field
-        label="Name"
-        value="${`${this.user?.firstName} ${this.user?.lastName}`}"
-        readonly
-        style="padding-top: 0;"
-      ></vaadin-text-field>
-      <vaadin-email-field
-        label="Email"
-        value="${ifDefined(this.user?.email)}"
-        readonly
-      ></vaadin-email-field>
-      <vaadin-text-field
-        label="Address"
-        value="${this.addressDescription()}"
-        readonly
-      ></vaadin-text-field>
-    </vaadin-form-layout>
-  `;
-
   addressDescription() {
     if (!this.user) {
       return '';
diff --git a/frontend/demo/component/dialog/dialog-no-padding.ts b/frontend/demo/component/dialog/dialog-no-padding.ts
index d24bc6a4d9..d58f1895cd 100644
--- a/frontend/demo/component/dialog/dialog-no-padding.ts
+++ b/frontend/demo/component/dialog/dialog-no-padding.ts
@@ -5,7 +5,6 @@ import '@vaadin/grid';
 import '@vaadin/grid/vaadin-grid-selection-column.js';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
 import { columnBodyRenderer } from '@vaadin/grid/lit.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import { applyTheme } from 'Frontend/demo/theme';
@@ -40,31 +39,21 @@ export class Example extends LitElement {
         @closed="${() => {
           this.dialogOpened = false;
         }}"
-        ${dialogRenderer(
-          () => html`
-            <vaadin-grid
-              .items="${this.people}"
-              style="width: 500px; max-width: 100%; border-radius: 0;"
-            >
-              <vaadin-grid-selection-column></vaadin-grid-selection-column>
-              <vaadin-grid-column
-                header="Name"
-                ${columnBodyRenderer<Person>(
-                  (item) => html`${item.firstName} ${item.lastName}`,
-                  []
-                )}
-              ></vaadin-grid-column>
-            </vaadin-grid>
-          `,
-          this.people
-        )}
-        ${dialogFooterRenderer(
-          () => html`
-            <vaadin-button theme="primary" @click="${this.close}">Filter</vaadin-button>
-          `,
-          []
-        )}
-      ></vaadin-dialog>
+      >
+        <vaadin-grid
+          .items="${this.people}"
+          style="width: 500px; max-width: 100%; border-radius: 0;"
+        >
+          <vaadin-grid-selection-column></vaadin-grid-selection-column>
+          <vaadin-grid-column
+            header="Name"
+            ${columnBodyRenderer<Person>((item) => html`${item.firstName} ${item.lastName}`, [])}
+          ></vaadin-grid-column>
+        </vaadin-grid>
+        <div slot="footer">
+          <vaadin-button theme="primary" @click="${this.close}">Filter</vaadin-button>
+        </div>
+      </vaadin-dialog>
       <!-- end::snippet[] -->
       <vaadin-button @click="${this.open}">Show dialog</vaadin-button>
     `;
diff --git a/frontend/demo/component/dialog/dialog-resizable.ts b/frontend/demo/component/dialog/dialog-resizable.ts
index d03311909d..53e521a65b 100644
--- a/frontend/demo/component/dialog/dialog-resizable.ts
+++ b/frontend/demo/component/dialog/dialog-resizable.ts
@@ -5,7 +5,6 @@ import '@vaadin/grid';
 import '@vaadin/vertical-layout';
 import { html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { dialogRenderer } from '@vaadin/dialog/lit.js';
 import { getPeople } from 'Frontend/demo/domain/DataService';
 import { applyTheme } from 'Frontend/demo/theme';
 import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
@@ -48,24 +47,20 @@ export class Example extends LitElement {
         @closed="${() => {
           this.dialogOpened = false;
         }}"
-        ${dialogRenderer(
-          () => html`
-            <vaadin-vertical-layout
-              theme="spacing"
-              style="max-width: 100%; min-width: 300px; height: 100%; align-items: stretch;"
-            >
-              <vaadin-grid .items="${this.people}">
-                <vaadin-grid-column path="firstName" title="First name"></vaadin-grid-column>
-                <vaadin-grid-column path="lastName" title="Last name"></vaadin-grid-column>
-                <vaadin-grid-column path="email" title="Email"></vaadin-grid-column>
-                <vaadin-grid-column path="profession" title="Profession"></vaadin-grid-column>
-                <vaadin-grid-column path="membership" title="Membership"></vaadin-grid-column>
-              </vaadin-grid>
-            </vaadin-vertical-layout>
-          `,
-          this.people
-        )}
-      ></vaadin-dialog>
+      >
+        <vaadin-vertical-layout
+          theme="spacing"
+          style="max-width: 100%; min-width: 300px; height: 100%; align-items: stretch;"
+        >
+          <vaadin-grid .items="${this.people}">
+            <vaadin-grid-column path="firstName" title="First name"></vaadin-grid-column>
+            <vaadin-grid-column path="lastName" title="Last name"></vaadin-grid-column>
+            <vaadin-grid-column path="email" title="Email"></vaadin-grid-column>
+            <vaadin-grid-column path="profession" title="Profession"></vaadin-grid-column>
+            <vaadin-grid-column path="membership" title="Membership"></vaadin-grid-column>
+          </vaadin-grid>
+        </vaadin-vertical-layout>
+      </vaadin-dialog>
       <!-- end::snippet[] -->
       <vaadin-button @click="${this.open}">Show dialog</vaadin-button>
     `;