docs(material/dialog): use element selector instead of attribute selector (#28517)

Because the element selector is:

- at least as much semantically correct as the div used until now
- more expressive
- by far the most used in this repository
- the only selector explicitly mentioned on https://material.angular.io/components/dialog/overview#dialog-content

Author: PowerKiKi

src/components-examples/material/dialog/dialog-animations/dialog-animations-example-dialog.html

@@ -1,8 +1,8 @@
 <h1 mat-dialog-title>Delete file</h1>
-<div mat-dialog-content>
+<mat-dialog-content>
   Would you like to delete cat.jpeg?
-</div>
-<div mat-dialog-actions>
+</mat-dialog-content>
+<mat-dialog-actions>
   <button mat-button mat-dialog-close>No</button>
   <button mat-button mat-dialog-close cdkFocusInitial>Ok</button>
-</div>
+</mat-dialog-actions>

src/components-examples/material/dialog/dialog-data/dialog-data-example-dialog.html

@@ -1,5 +1,5 @@
 <h1 mat-dialog-title>Favorite Animal</h1>
-<div mat-dialog-content>
+<mat-dialog-content>
   My favorite animal is:
   <ul>
     <li>
@@ -18,4 +18,4 @@ <h1 mat-dialog-title>Favorite Animal</h1>
       } Lion
     </li>
   </ul>
-</div>
+</mat-dialog-content>

src/components-examples/material/dialog/dialog-elements/dialog-elements-example-dialog.html

@@ -1,5 +1,5 @@
 <h1 mat-dialog-title>Dialog with elements</h1>
-<div mat-dialog-content>This dialog showcases the title, close, content and actions elements.</div>
-<div mat-dialog-actions>
+<mat-dialog-content>This dialog showcases the title, close, content and actions elements.</mat-dialog-content>
+<mat-dialog-actions>
   <button mat-button mat-dialog-close>Close</button>
-</div>
+</mat-dialog-actions>

src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html

@@ -1,12 +1,12 @@
 <h1 mat-dialog-title>Hi {{data.name}}</h1>
-<div mat-dialog-content>
+<mat-dialog-content>
   <p>What's your favorite animal?</p>
   <mat-form-field>
     <mat-label>Favorite Animal</mat-label>
     <input matInput [(ngModel)]="data.animal">
   </mat-form-field>
-</div>
-<div mat-dialog-actions>
+</mat-dialog-content>
+<mat-dialog-actions>
   <button mat-button (click)="onNoClick()">No Thanks</button>
   <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
-</div>
+</mat-dialog-actions>

src/dev-app/slider/slider-demo.ts

@@ -124,15 +124,15 @@ export class SliderDemo {
   styleUrls: ['slider-demo.css'],
   template: `
   <h1 mat-dialog-title>Slider in a dialog</h1>
-  <div class="demo-dialog-content" mat-dialog-content>
+  <mat-dialog-content class="demo-dialog-content">
   <mat-slider [discrete]="this.data.discrete" [showTickMarks]="this.data.showTickMarks" [color]="this.data.color" step="10">
       <input value="50" matSliderThumb>
     </mat-slider>
     <mat-slider [discrete]="this.data.discrete" [showTickMarks]="this.data.showTickMarks" [color]="this.data.color" step="10">
       <input value="30" matSliderStartThumb>
       <input value="70" matSliderEndThumb>
     </mat-slider>
-  </div>
+  </mat-dialog-content>
   `,
   standalone: true,
   imports: [MatSliderModule, MatDialogTitle, MatDialogContent],