refactor: use custom element for dialog renderers instead of div (#10374)

Author: web-padawan

packages/dialog/src/vaadin-dialog-overlay-mixin.js

@@ -60,7 +60,7 @@ export const DialogOverlayMixin = (superClass) =>
      */
     get _rendererRoot() {
       if (!this.__savedRoot) {
-        const root = document.createElement('div');
+        const root = document.createElement('vaadin-dialog-content');
         root.style.display = 'contents';
         this.owner.appendChild(root);
         this.__savedRoot = root;
@@ -94,7 +94,7 @@ export const DialogOverlayMixin = (superClass) =>
 
     /** @private */
     __createContainer(slot) {
-      const container = document.createElement('div');
+      const container = document.createElement('vaadin-dialog-content');
       container.setAttribute('slot', slot);
       return container;
     }

packages/dialog/test/dom/__snapshots__/dialog.test.snap.js

@@ -1,22 +1,83 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["vaadin-dialog host"] = 
+snapshots["vaadin-dialog host default"] = 
 `<vaadin-dialog
   aria-modal="true"
   opened=""
   role="dialog"
   tabindex="0"
   with-backdrop=""
 >
-  <div>
+  <vaadin-dialog-content>
     content
-  </div>
+  </vaadin-dialog-content>
 </vaadin-dialog>
 `;
-/* end snapshot vaadin-dialog host */
+/* end snapshot vaadin-dialog host default */
 
-snapshots["vaadin-dialog shadow"] = 
+snapshots["vaadin-dialog host headerTitle"] = 
+`<vaadin-dialog
+  aria-label="Title"
+  aria-modal="true"
+  has-title=""
+  opened=""
+  role="dialog"
+  tabindex="0"
+  with-backdrop=""
+>
+  <vaadin-dialog-content>
+    content
+  </vaadin-dialog-content>
+  <h2
+    class="draggable"
+    slot="title"
+  >
+    Title
+  </h2>
+</vaadin-dialog>
+`;
+/* end snapshot vaadin-dialog host headerTitle */
+
+snapshots["vaadin-dialog host headerRenderer"] = 
+`<vaadin-dialog
+  aria-modal="true"
+  has-header=""
+  opened=""
+  role="dialog"
+  tabindex="0"
+  with-backdrop=""
+>
+  <vaadin-dialog-content>
+    content
+  </vaadin-dialog-content>
+  <vaadin-dialog-content slot="header-content">
+    Header
+  </vaadin-dialog-content>
+</vaadin-dialog>
+`;
+/* end snapshot vaadin-dialog host headerRenderer */
+
+snapshots["vaadin-dialog host footerRenderer"] = 
+`<vaadin-dialog
+  aria-modal="true"
+  has-footer=""
+  opened=""
+  role="dialog"
+  tabindex="0"
+  with-backdrop=""
+>
+  <vaadin-dialog-content>
+    content
+  </vaadin-dialog-content>
+  <vaadin-dialog-content slot="footer">
+    Footer
+  </vaadin-dialog-content>
+</vaadin-dialog>
+`;
+/* end snapshot vaadin-dialog host footerRenderer */
+
+snapshots["vaadin-dialog shadow default"] = 
 `<vaadin-dialog-overlay
   exportparts="backdrop, overlay, header, title, header-content, content, footer"
   focus-trap=""
@@ -45,9 +106,9 @@ snapshots["vaadin-dialog shadow"] =
   </slot>
 </vaadin-dialog-overlay>
 `;
-/* end snapshot vaadin-dialog shadow */
+/* end snapshot vaadin-dialog shadow default */
 
-snapshots["vaadin-dialog modeless"] = 
+snapshots["vaadin-dialog shadow modeless"] = 
 `<vaadin-dialog-overlay
   exportparts="backdrop, overlay, header, title, header-content, content, footer"
   focus-trap=""
@@ -76,9 +137,9 @@ snapshots["vaadin-dialog modeless"] =
   </slot>
 </vaadin-dialog-overlay>
 `;
-/* end snapshot vaadin-dialog modeless */
+/* end snapshot vaadin-dialog shadow modeless */
 
-snapshots["vaadin-dialog theme"] = 
+snapshots["vaadin-dialog shadow theme"] = 
 `<vaadin-dialog-overlay
   exportparts="backdrop, overlay, header, title, header-content, content, footer"
   focus-trap=""
@@ -108,9 +169,9 @@ snapshots["vaadin-dialog theme"] =
   </slot>
 </vaadin-dialog-overlay>
 `;
-/* end snapshot vaadin-dialog theme */
+/* end snapshot vaadin-dialog shadow theme */
 
-snapshots["vaadin-dialog overlay"] = 
+snapshots["vaadin-dialog shadow overlay"] = 
 `<div
   id="backdrop"
   part="backdrop"
@@ -164,5 +225,5 @@ snapshots["vaadin-dialog overlay"] =
   </section>
 </div>
 `;
-/* end snapshot vaadin-dialog overlay */
+/* end snapshot vaadin-dialog shadow overlay */
 

packages/dialog/test/dom/dialog.test.js

@@ -22,27 +22,53 @@ describe('vaadin-dialog', () => {
     await oneEvent(overlay, 'vaadin-overlay-open');
   });
 
-  it('host', async () => {
-    await expect(dialog).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
-  });
+  describe('host', () => {
+    it('default', async () => {
+      await expect(dialog).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    });
 
-  it('shadow', async () => {
-    await expect(dialog).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
-  });
+    it('headerTitle', async () => {
+      dialog.headerTitle = 'Title';
+      await nextUpdate(dialog);
+      await expect(dialog).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    });
 
-  it('modeless', async () => {
-    dialog.modeless = true;
-    await nextUpdate(dialog);
-    await expect(dialog).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
-  });
+    it('headerRenderer', async () => {
+      dialog.headerRenderer = (root) => {
+        root.textContent = 'Header';
+      };
+      await nextUpdate(dialog);
+      await expect(dialog).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    });
 
-  it('theme', async () => {
-    dialog.setAttribute('theme', 'custom');
-    await nextUpdate(dialog);
-    await expect(dialog).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    it('footerRenderer', async () => {
+      dialog.footerRenderer = (root) => {
+        root.textContent = 'Footer';
+      };
+      await nextUpdate(dialog);
+      await expect(dialog).dom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    });
   });
 
-  it('overlay', async () => {
-    await expect(overlay).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
+  describe('shadow', () => {
+    it('default', async () => {
+      await expect(dialog).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    });
+
+    it('modeless', async () => {
+      dialog.modeless = true;
+      await nextUpdate(dialog);
+      await expect(dialog).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    });
+
+    it('theme', async () => {
+      dialog.setAttribute('theme', 'custom');
+      await nextUpdate(dialog);
+      await expect(dialog).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    });
+
+    it('overlay', async () => {
+      await expect(overlay).shadowDom.to.equalSnapshot(SNAPSHOT_CONFIG);
+    });
   });
 });

packages/dialog/test/header-footer.test.js

@@ -157,7 +157,7 @@ describe('header/footer feature', () => {
       await nextRender();
 
       expect(dialog.textContent).to.include(HEADER_CONTENT);
-      expect(dialog.querySelector('div[slot=header-content]')).to.exist;
+      expect(dialog.querySelector('[slot=header-content]')).to.exist;
     });
 
     it('should remove header element if headerRenderer is removed', async () => {
@@ -169,7 +169,7 @@ describe('header/footer feature', () => {
       await nextUpdate(dialog);
 
       expect(dialog.textContent).to.not.include(HEADER_CONTENT);
-      expect(dialog.querySelector('div[slot=header-content]')).to.not.exist;
+      expect(dialog.querySelector('[slot=header-content]')).to.not.exist;
     });
 
     it('should render new content if another headerRenderer is set', async () => {
@@ -243,7 +243,7 @@ describe('header/footer feature', () => {
       await nextRender();
 
       expect(dialog.textContent).to.include(FOOTER_CONTENT);
-      expect(dialog.querySelector('div[slot=footer]')).to.exist;
+      expect(dialog.querySelector('[slot=footer]')).to.exist;
     });
 
     it('should remove footer element if footerRenderer is removed', async () => {
@@ -255,7 +255,7 @@ describe('header/footer feature', () => {
       await nextUpdate(dialog);
 
       expect(dialog.textContent).to.not.include(FOOTER_CONTENT);
-      expect(dialog.querySelector('div[slot=footer]')).to.not.exist;
+      expect(dialog.querySelector('[slot=footer]')).to.not.exist;
     });
 
     it('should render new content if another footerRenderer is set', async () => {