使用CSS类为Kendo编辑器模板设置样式

Question

我希望能够将类添加到Kendo模板中的HTML元素中，然后使用CSS将样式应用于它们。

<style>
    .foo {
        color: red;
    }
</style>

<table class="table template">
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="foo">Foo</td>
            <td>Bar</td>
            <td>Baz</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

<textarea id="myKendoEditor"></textarea>

<script>
let template = $(".template").get(0).outerHTML;
$("#myKendoEditor").data("kendoEditor").value(template);
</script>

这不起作用，我猜是因为在应用CSS时，模板中的标记不是DOM的一部分。

有没有办法做到这一点？我唯一获得的成功是在模板中的元素上添加了style属性，但这确实很讨厌，因为我想使样式与模板保持独立。