Elementor Custom Widget Color Control does not work in live editing

I am working on a custom widget and I want to add styling configuration to the widget. One small problem that I found is that the color control in live editing does not work (It will work for preview and after save then reload).

As shown below, Tab’s title and content font color does not change in live editor.

When you click on preview, it works as expected.

I started with the sample code provided on the Elementor Developers page:

echo '<h2 class="title" style="color: ' . $settings['title_color'] . '"> .. </h2>';

However I am getting the same results as describe in the first section.

I then tried to pass parameters to css class, as suggested in this stack overflow post. Though it was successfully set, but it was not set correctly.
My php file:

echo "<p id='narrative' style=' --fontColor : ".$settings['content_color']."'></p>";

In my css file:

#narrative {color: var(--fontColor);}

When I check on dev tool:

I am not really sure what went wrong, greatly appreciate if anyone could point me to the right direction. Thank you.

Answer

After reading through the sample source code on Elementor Code Reference.

I found out that I missed out a two important steps:

1. add selector to your class attribute when adding new color control:

$this->add_control(
    'border_color',
    [
        'label' => __( 'Border Color', 'elementor' ),
        'type' => ElementorControls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .title' => 'color: {{VALUE}};', <-- add selector
        ],
    ]
);

2. (Important) Add _content_template() function, this function is to generate live preview: Just to note that any for loops in this function should be written in javascript with <# #> instead of php in render().

<h2 class="title"> .. </h2>';