How to correctly change styles of elements using selective refresh from Customizer

I have a WP_Customize_Color_Control in the Customizer. And I have the following selective_refresh code;

       $wp_customize->selective_refresh->add_partial(
            'bgcolor',
            array(
                'selector'        => '#bg-color',
                'render_callback' => function() {
                    return ''; //I have other elements inside #bg-color element.
                },'fallback_refresh' => false
            )
        );

I change the color using the following js code;

   wp.customize( 'bgcolor', function( value ) {
        value.bind( function( to ) {
            $( '#bg-color' ).css('background-color', to);
        } );
    } );

In the html, I have the element #bg-color with other stuff inside it. Whenever I change the color in Customizer, the render_callback is called and the element is emptied. I want to keep the elements inside #bg-color, I only want the background color to change. What can I do about this?
(I cannot copy what’s inside #bg-color into php, coz the element contents will be modified several times in the future)

Edit: I found this in a tutorial which alters css through php like this;

'render_callback' => function() {
   return self::css('#bg-color', 'background-color', 'bgcolor');
}

But this gives 500 error.