i created a fragments project with yeoman. in the page editor it shows a color choice but that color has no effect.

i quickly found two ways to make it work but which is the correct approach?

1. change html:

 <div class="sample-fragment">
-  <h1> 
+  <h1 style="color: ${configuration.textColor.rgbValue}"> 
     <lfr-editable id="title" type="text">
       Sample fragment
     </lfr-editable>
   </h1>
 </div>

2. (alternative) change js

 console.group('Sample fragment');
 console.log('fragmentElement', fragmentElement);
 console.log('configuration', configuration);
+fragmentElement.style.color = configuration.textColor.rgbValue;
 console.groupEnd();

i have not found so far a document that describes how that should work. glad for any hint.

setup details:

created a sample fragments project with "generator-liferay-fragments": "1.9.1" 

yarn global add yo generator-liferay-fragments

yo liferay-fragments

yarn run import

and docker run ... liferay/portal:7.4.0-ga1