[zh-CN]: add translation for `{Document, ShadowRoot}.pointerLockEleme…

…nt` (#23797)

files/zh-cn/web/api/document/pointerlockelement/index.md

@@ -1,30 +1,66 @@
 ---
 title: Document：pointerLockElement 属性
 slug: Web/API/Document/pointerLockElement
+l10n:
+  sourceCommit: c99ff93a1b71e7d664509fdd3e0c168920be967a
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("Pointer Lock API")}}
 
-{{domxref("Document")}} 接口的 `pointerLockElement` 只读属性提供了指针锁定时鼠标事件的目标元素。如果指针处于锁定等待中、指针没有被锁定或目标元素在另外一个文档中，返回 `null`。
+{{domxref("Document")}} 接口的 **`pointerLockElement`** 只读属性提供了指针锁定时鼠标事件的目标元素。如果指针处于锁定等待中、指针没有被锁定或目标元素在另外一个文档中，返回 `null`。
 
 ## 值
 
-一个 {{domxref("Element")}} 或 `null`。
+{{domxref("Element")}} 或 `null`。
 
 ## 示例
 
-确定一个 canvas 元素当前是否被指针锁定。
+### 检查指针锁定状态
 
-```js
-if (document.pointerLockElement === canvasElement) {
-  console.log("指针当前已锁定");
-  // 做一些有用的响应
-} else {
-  console.log("指针当前已解锁");
-  // 做一些有用的响应
+此示例包含一个 {{htmlelement("div")}} 元素，该元素又包含一个 {{htmlelement("button")}}。单击按钮会请求 `<div>` 的指针锁定。
+
+此示例还监听 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} 事件：触发此事件时，如果文档中的元素具有指针锁定，则事件处理程序会禁用“锁定”按钮，否则启用该按钮。
+
+这样做的效果是，如果你单击“锁定”按钮，指针将被锁定，按钮将被禁用：如果你随后退出指针锁定（例如，按 <kbd>Escape</kbd> 键），按钮将再次启用。
+
+#### HTML
+
+```html
+<div id="container">
+  <button id="lock">锁定</button>
+</div>
+```
+
+#### CSS
+
+```css
+div {
+  height: 100px;
+  width: 200px;
+  border: 2px solid blue;
 }
 ```
 
+#### JavaScript
+
+```js
+const lock = document.querySelector("#lock");
+const container = document.querySelector("#container");
+
+lock.addEventListener("click", () => {
+  container.requestPointerLock();
+});
+
+document.addEventListener("pointerlockchange", () => {
+  const locked = document.pointerLockElement;
+  lock.disabled = Boolean(locked);
+});
+```
+
+#### 结果
+
+{{EmbedLiveSample("检查指针锁定状态")}}
+
 ## 规范
 
 {{Specifications}}

files/zh-cn/web/api/shadowroot/pointerlockelement/index.md

@@ -0,0 +1,36 @@
+---
+title: ShadowRoot：pointerLockElement 属性
+slug: Web/API/ShadowRoot/pointerLockElement
+l10n:
+  sourceCommit: c99ff93a1b71e7d664509fdd3e0c168920be967a
+---
+
+{{APIRef("Pointer Lock API")}}
+
+{{domxref("ShadowRoot")}} 接口的 **`pointerLockElement`** 只读属性提供在指针锁定时作为鼠标事件目标的元素集。如果指针处于锁定等待中、指针没有被锁定或目标元素在另外一棵树中，则该属性为 `null`。
+
+## 值
+
+{{domxref("Element")}} 或 `null`。
+
+## 示例
+
+```js
+let customElem = document.querySelector("my-shadow-dom-element");
+let shadow = customElem.shadowRoot;
+let pleElem = shadow.pointerLockElement;
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{ domxref("Document.exitPointerLock()") }}
+- {{ domxref("Element.requestPointerLock()") }}
+- [Pointer Lock](/zh-CN/docs/Web/API/Pointer_Lock_API)