Скрипт приложения Google: разделение HTML и CSS

Question

У меня есть вопрос, связанный с названием. В настоящее время я пытаюсь следовать Google "Best Practice". https://developers.google.com/apps-script/guides/html/best-practices Я не знаю, почему это не работает. Вот MainPageCSS.html

<pre>
<style>
p {
  color: green;
}
</style>
</pre>

Затем идет функция на стороне сервера:

function includeCSS() { 
var content = HtmlService.createTemplateFromFile('MainPageCSS').getRawContent();
  //.getContent();
return content;
}

Я использую боковую панель через HtmlService и вызываю google.script.run.withSuccessHandler(SuccessAddCss).includeCSS(); Я пробовал разные способы добавления CSS на страницу, но никто не работал...

function SuccessAddCss(Style){
   var styles = document.getElementById("allStyles").innerHTML += "p { color:red }";
   var text = styles.innerHTML;
   var styleNode = document.createElement('style');
   var styleText = document.createTextNode('p { color:red; } ');
   styleNode.appendChild(styleText);
   document.getElementsByTagName('head')[0].appendChild(styleNode);
   alert("ok");
};
function teso()
{
   google.script.run.withSuccessHandler(SuccessAddCss).includeCSS();
   alert(text);
};

Чтобы как-то добавить css из MainPageCSS в MainPage id="allStyles" type="text/css"

<pre>
<style id="allStyles" type="text/css">
h2{
font-family: Times New Roman, Times, serif;
font-size: 14px;
text-align: center;
}
</style>

</pre>

Также боковая панель запускается в режиме SandBox.Native, поэтому она позволяет динамические изменения CSS. Спасибо за помощь.

Answer 1

На моем веб-сайте я использую скриптлет для включения файла CSS.

HTML:

<?!= include('MainPageCSS'); ?>

<div>Some Content Here</div>
<form>A form</form>
<button>A button</button>

Вот так include Функция вызывается из файла HTML. Просто любопытно, не могли бы вы вынуть <pre> теги и посмотреть, если это имеет какое-либо значение?