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

title, sidebar_position

title	sidebar_position
Handle a single component	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.

▶ Run Code

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

:::