Dialog: add tips on lazy render (#11266)

examples/docs/en-US/dialog.md

@@ -237,12 +237,10 @@ If a Dialog is nested in another Dialog, `append-to-body` is required.
 ```
 :::
 
-:::
-
 ### Centered content
 Dialog's content can be centered.
 
-:::demo Setting `center` to `true` will center dialog's header and footer horizontally.
+:::demo Setting `center` to `true` will center dialog's header and footer horizontally. `center` only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.
 
 ```html
 <el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
@@ -272,7 +270,7 @@ Dialog's content can be centered.
 :::
 
 :::tip
-`center` only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.
+The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using `ref`, do it in the `open` event callback.
 :::
 
 :::tip

examples/docs/es/dialog.md

@@ -246,7 +246,7 @@ Si un diálogo está anidado en otro diálogo, se requiere append-to-body.
 ### Contenido centrado
 El contenido de Diálogo se puede centrar.
 
-:::demo Ajuste `center` en `true` para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente.
+:::demo Ajuste `center` en `true` para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente. `center` sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.
 
 ```html
 <el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
@@ -276,7 +276,7 @@ El contenido de Diálogo se puede centrar.
 :::
 
 :::tip
-`center` sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.
+The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using `ref`, do it in the `open` event callback.
 :::
 
 :::tip

examples/docs/zh-CN/dialog.md

@@ -238,7 +238,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 
 标题和底部可水平居中
 
-:::demo 将 `center` 设置为 `true` 即可使标题和底部居中。
+:::demo 将`center`设置为`true`即可使标题和底部居中。`center`仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。
 
 ```html
 <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
@@ -268,7 +268,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 :::
 
 :::tip
-`center` 仅影响标题和底部区域。Dialog 的内容是任意的，在一些情况下，内容并不适合居中布局。如果需要内容也水平居中，请自行为其添加 CSS。
+Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 `ref` 获取相应组件，请在 `open` 事件回调中进行。
 :::
 
 :::tip