如何在data-sly-call调用模板时添加额外自定义属性及CSS类？

问题背景 #

现有button模板代码如下：

<template data-sly-template.button="${ @ model}">
    <button data-info="Body"
            class="${model.moreClass}">
        ${model.label}
    </button>
</template>

需要调用该模板时，为内部的button元素添加模板未定义的额外属性（如aria-expanded、自定义属性及额外CSS类），但之前尝试的三种写法均无效。

正确解决方案 #

要实现需求，需先改造模板以支持接收额外属性，再通过正确的调用语法传递属性。

步骤1：修改button模板

扩展模板参数，新增可选的attributes参数，用于接收额外属性，并通过data-sly-attribute将属性应用到button元素。同时单独处理class属性，实现原有class与额外class的合并：

<template data-sly-template.button="${@ model, attributes= {}}">
    <button data-info="Body"
            class="${model.moreClass} ${attributes.class}"
            data-sly-attribute="${attributes @ except=['class']}">
        ${model.label}
    </button>
</template>

• attributes= {}：设置默认空对象，避免未传递属性时出现报错
• class="${model.moreClass} ${attributes.class}"：合并模板原有class与调用时传入的额外class
• data-sly-attribute="${attributes @ except=['class']}"：将除class外的所有额外属性绑定到button元素，避免class重复应用

步骤2：正确调用模板

调用时，通过attributes参数传递所有额外属性（包括class）：

<sly data-sly-use.btnTemplate="button/button.html"></sly>
<sly data-sly-call="${btnTemplate.button @ 
    model=btnModel.btn,
    attributes= {
        'aria-expanded': false,
        'toggle-style': model.toggleStyle,
        'aria-controls': model.id,
        'data-alternate-aria-label': model.altAriaLabel,
        'class': 'your-extra-class' // 可选：添加额外CSS类
    }
}"></sly>

为什么之前的写法无效 #

data-sly-call标签本身的属性不会自动传递给模板内部的DOM元素，模板必须显式接收并处理这些属性才能生效。你之前的三种写法都是直接在call标签上添加属性，但这些属性无法被模板内的button元素继承，因此没有效果。

内容的提问来源于stack exchange，提问作者superninja