如何修改存储在变量中的HTML模板内部元素的属性？

解决方案 #

你用html标签模板函数（通常是Lit、lit-html等类库提供的能力）返回的myTemplate是模板结果对象，本身不是DOM元素，所以直接给它加属性不会作用到内部的组件上，你可以根据使用场景选以下任意一种方案实现需求：

方案1：模板绑定时动态传值（最推荐）

在定义模板的时候直接用表达式绑定属性，后续要修改属性值只需要更新对应变量再重新渲染模板即可：

// 定义属性存储变量
const compAttrs = {
  foo: 'defaultValue'
};

// 模板内绑定属性
const myTemplate = html`
  <my-component 
    .foo=${compAttrs.foo}
    static-attr="固定属性值"
  >
  </my-component>
`;

// 需要修改属性时直接更新变量，重新渲染模板就会生效
compAttrs.foo = 'bar';
// 执行你的模板渲染逻辑即可

方案2：模板渲染到DOM后修改属性

如果模板已经渲染到页面中，直接通过DOM选择器定位到内部元素再修改属性即可：

// 示例：先把模板渲染到页面容器
render(myTemplate, document.querySelector('#app-container'));

// 渲染完成后选择目标元素
const targetComp = document.querySelector('my-component');
// 修改响应式属性
targetComp.foo = 'bar';
// 修改普通字符串属性
targetComp.setAttribute('custom-attr', 'test');

方案3：渲染前直接修改模板内容

如果需要在渲染前就调整模板的属性，可以把模板内容转成DOM片段修改后再生成新模板：

// 解析模板内容为DOM结构
const parser = new DOMParser();
const tempDoc = parser.parseFromString(myTemplate.strings.join(''), 'text/html');
// 定位内部元素修改属性
const targetComp = tempDoc.querySelector('my-component');
targetComp.setAttribute('foo', 'bar');

// 生成修改后的新模板
const modifiedTemplate = html`${tempDoc.body.innerHTML}`;

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