How do I pass the dynamic output of a php variable or php function to a CSS variable?



PHP Snippet 1:

<div id="myid"><?php produces-a-string() ?></div>

PHP Snippet 2:

 #myid {
display: none;
}

PHP Snippet 3:

document.onload = function() {
var grab = document.getElementById("myid");
var strText = grab.innerText;
grab.setProperty("--grabbed", strText);
}

PHP Snippet 4:

#myid {
  display: none;
  --grabbed: string-produced;
}

PHP Snippet 5:

main {
attribute: var(--grabbed);
}

PHP Snippet 6:

main {
attribute: string-produced;
}

PHP Snippet 7:

document.onload = function() {
var grab = document.getElementById("myid");
var strText = grab.innerText; 
document.getElementBy[id-where-content-is-added].setAttribute("title", strText);
}

PHP Snippet 8:

#id-where-content-is-added {
content: attr(title);
}

PHP Snippet 9:

#id-where-content-is-added {
content: string-produced;
}