Ractive是否将CSS样式应用于被调用的部分？

Question

我正试图在我的HTML中分解一些代码。我有一个自定义树组件（Ractive组件），其中树的节点是部分的，如下所示：

<!-- {{>node}} -->
<li class='node'>
    {{#data}}
    <span class='MyClass'>  
        {{>content}}
        Some text
    </span>
    {{/data}}
<!-- {{/node}} -->

在我的CSS中，我有：

.active
{
  color: red; 
}

注意：{{>content}}是一个调用某些数据的Ractive本机指令。

因此，一旦呈现html，解析指令{{>content}}后显示的内容不是红色，而“某些文本”是红色。

我错过了什么，还是不可能？作为一种解决方法，我可以直接在调用代码中移动跨度，但是我将不得不为使用此部分的任何代码执行此操作。如果可能的话，我想避免它。

编辑：这是调用代码（我的HTML源文件的简化内容）：

<Tree>
    <a href="#" on-click="select">
        {{name}}
    </a>
</Tree>