update docs

packages/artplayer-document/docs/en/Questions/Handle_single_component.md

@@ -0,0 +1,61 @@
+---
+title: Handle a single component
+sidebar_position: 3
+---
+
+When we add custom components in `layers`, `contextmenu`, `controls`, It is best to add a `name` property that is used to position the DOM element of the component.
+
+Here are three ways to get the DOM element of the component: component method `mounted`, instance method `query`, recommended through `name` direct acquisition.
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
+
+art.on('ready', () => {
+    art.layers.add({
+        name: 'layer1',
+        html: 'your-layer',
+        mounted: function($layer1) {
+            //
+        }
+    });
+
+    art.contextmenu.add({
+        name: 'contextmenu1',
+        html: 'your-contextmenu',
+        mounted: function($contextmenu1) {
+            //
+        }
+    });
+
+    art.controls.add({
+        name: 'control1',
+        html: 'your-control',
+        position: 'right',
+        mounted: function($control1) {
+            //
+        }
+    });
+
+    // Use the query method to get the DOM element of the component
+    var $layer1 = art.query('.art-layer-layer1');
+    var $contextmenu1 = art.query('.art-contextmenu-contextmenu1');
+    var $control1 = art.query('.art-control-control1');
+
+    // Recommended use the name to get the DOM element of the component
+    var $layer1 = art.layers['layer1'];
+    var $contextmenu1 = art.contextmenu['contextmenu1'];
+    var $control1 = art.controls['control1'];
+});
+```
+
+:::tip 提示
+
+Note that you can't create components with the same name
+
+:::