How can I change css content with attr and appscript

I have a function which is returing a value “Suggested color” , however I want to put that value as content in stylsheet with class

#boxes > div.fail::before {
  content : attr(data-content);
}

whereas my appscript is shown as below which is returning value “suggested color” I want that value to be printed in

div.fail::before{content : }

dynamically. So my appscript function is

 
const calculateRatio = (fcolor, bgcolor) => new Promise((resolve, reject) => google.script.run.withSuccessHandler(resolve).withFailureHandler(reject).calculateRatio(fcolor, bgcolor));
const hexx = (fcolor, bgcolor) => new Promise((resolve, reject) => google.script.run.withSuccessHandler(resolve).withFailureHandler(reject).hexx(fcolor, bgcolor));
async function runnCode() {
  const fcolor = document.getElementById("color-1-hex").value;
  const bgcolor = document.getElementById("color-2-hex").value;
  const ratio = await calculateRatio(fcolor, bgcolor).catch(err => console.log(err));
  const suggestedColor = await hexx(fcolor, bgcolor).catch(err => console.log(err));

  var n = 1/ratio;
  var actualRatio = n.toFixed(2);
  document.getElementById("ratio").innerHTML = actualRatio + ":1";
  document.getElementById("aa-normal").className  = ratio < 0.22222 ? "" : "fail";
  document.getElementById("aa-large").className   = ratio < 0.33333 ? "" : "fail";
  document.getElementById("aaa-normal").className = ratio < 0.14285 ? "" : "fail";
  document.getElementById("aaa-large").className  = ratio < 0.22222 ? "" : "fail";
  document.getElementById("ratioContainer").className   = ratio > 0.22222 ? "" : "pass";
  const demo = document.getElementById("sample-text");
  demo.style.color = fcolor;
  demo.style.backgroundColor = bgcolor;
  const totalWrong = document.querySelectorAll(".fail").length;
  let mouth = document.getElementById("mouth");
  let smile = document.getElementById("smile");
  switch(totalWrong) {
    case 0:
      mouth = mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,149  125,149  116,149 109,142 106,132 Z") ;
      smile = smile.setAttribute("d", "M125,144 C 140,144 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,144 125,144 Z");
      break;
    case 1:
    case 2:
      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,142  134,146  125,146  116,146 109,142 106,132 Z");
      smile.setAttribute("d", "M125,141 C 140,141 143,132 143,132 143,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,141 125,141 Z");
      break;
    case 3: 
      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  140,143  125,143  110,143 109,138 106,132 Z");
      smile.setAttribute("d", "M125,138 C 140,138 143.5,132 143.5,132 143.5,132 125,133 125,133 125,133 106.5,132 106.5,132 106.5,132 110,138 125,138 Z");
      break;
    case 4: 
      mouth.setAttribute("d", "M 106,132 C 113,127 125,128 125,132 125,128 137,127 144,132 141,138  134,142  125,142  116,142 109,138 106,132 Z");
      smile.setAttribute("d", "M125,135 C 140,135 143,132 143,132 143,135 125,136 125,136 125,136 106.5,135 106.5,132 106.5,132 110,135 125,135 Z");
      break;
  }

  document.getElementById("aa-normal").attr('data-content')  = ratio < 0.22222 ? "" : suggestedColor;
  document.getElementById("aa-large").attr("data-content")   = ratio < 0.33333 ? "" : fail;
  document.getElementById("aaa-normal").attr('data-content') = ratio < 0.14285 ? "" : fail;
  document.getElementById("aaa-large").attr('data-content')  = ratio < 0.22222 ? "" : fail;

  
}

Kindly suggest how to modify below line so as to print the value of suggestedColor in conntent of div.fail::before

document.getElementById("aa-normal").attr('data-content')  = ratio < 0.22222 ? "" : suggestedColor;

Html is as follows

 <div id="boxes">
    <div id="aa-large">
      <span>Large Text</span>
      <span>WCAG AA</span>
    </div>
    <div id="aa-normal" data-content="">
      <span>Normal Text</span>
      <span>WCAG AA</span>
    </div>
    <div id="aaa-large" data-content="">
      <span>Large Text</span>
      <span>WCAG AAA</span>
    </div>
    <div id="aaa-normal" data-content="">
      <span>Normal Text</span>
      <span>WCAG AAA</span>
    </div>
  </div>

stylesheet >>

#boxes {
  display: flex;
  margin-top: 0.5rem;
}

#boxes > div {
  flex: 1;
  text-align: center;
  background: #081;
  color: white;
  padding: 0.5rem 0;
  margin-left: 10px;
  border-radius: 3px;
  transition: background 0.5s;
  position: relative;
}

#boxes > div::after {
  content: "✓ Pass";
  display: block;
  position: absolute;
  color: #000;
  text-align:center;
  width: 100%;
  margin-top: 10px;
}
#boxes > div::before {
  
  display: block;
  position: absolute;
  color: #000;
  text-align:center;
  width: 100%;
  margin-top: -28px;
}
#boxes > div.fail::before {
  content : attr(data-content);
   /* content: "✓ ";  */
}
#boxes > div.fail {
  background: #d32;
}

#boxes > div.fail::after {
  content: "✕ Fail";
}

#boxes > div:first-child {
  margin-left: 0;
}

#boxes span:first-child {
  font-size: 0.75em;
  display: inline-block;
  margin-bottom: 0.5em;
}

Answer

I thought that in your script, attr() of document.getElementById("aa-normal").attr('data-content') = ratio < 0.22222 ? "" : suggestedColor; might not be correct. In this case, how about modifying as follows.

From:

document.getElementById("aa-normal").attr('data-content')  = ratio < 0.22222 ? "" : suggestedColor;

To:

document.getElementById("aa-normal").setAttribute('data-content', ratio < 0.22222 ? "" : suggestedColor);

Reference:

• setAttribute()