What you need to do is implement a custom Partial in JS which applies a custom refresh behavior of modifying the background-color instead of fetching a newly-rendered partial from the server. So it’s partials with edit shortcuts but without any server-side selective refresh.
For example, enqueue the following JS in the customizer preview with a customize-selective-refresh dependency:
wp.customize.selectiveRefresh.partialConstructor.background_color = (function( api, $ ) {
'use strict';
return api.selectiveRefresh.Partial.extend( {
/**
* Refresh.
*
* Override refresh behavior to apply changes with JS instead of doing
* a selective refresh request for PHP rendering (since unnecessary).
*
* @returns {jQuery.promise} Resolved promise.
*/
refresh: function() {
var partial = this, backgroundColorSetting;
backgroundColorSetting = api( partial.params.primarySetting );
_.each( partial.placements(), function( placement ) {
placement.container.css( 'background-color', backgroundColorSetting.get() );
} );
// Return resolved promise since no server-side selective refresh will be requested.
return $.Deferred().resolve().promise();
}
} );
})( wp.customize, jQuery );
Then when you register your partial, make sure you supply the type of background_color to connect the PHP-registered partial with the JavaScript partialConstructor, like so:
$wp_customize->selective_refresh->add_partial( 'wpse_282425_background_color', array(
'type' => 'background_color', // 👈 Key addition.
'selector' => '#bg-color',
'container_inclusive' => false,
'render_callback' => 'dummy_function',
) );
Standalone plugin that demonstrates technique: https://gist.github.com/westonruter/e8cf3c1c5abdbd123b65459fdaa74b5e
Demo video:
