javascript - 如何修改 html 模板中元素的属性？

Question

我有一个存储在变量中的 html 模板：

const myTemplate = html`
    <my-component>
    </my-component>
`

我想在myTemplate.

就像是

myTemplate.foo = "bar"

但这引用了模板而不是元素；如何隔离元素来修改它？

Answer 1

对于这种情况，您通常会使用返回模板的函数。

const myTemplate = (props) => {
  return html`<my-component foo=${props.foo} .bar=${props.bar}></mycomponent>`;
};
const instance = myTemplate({foo: 'some value', bar: 3});
const otherInstance = myTemplate({foo: 'other value', bar: 42});

Answer 2

据我所知，您不能，至少不能尝试（至少使用公共 API）。

最好的选择是简单地使用已经存在的选项来渲染它：

const myTemplate = html`
    <my-component .foo=${'bar'}>
    </my-component>
`;

这应该是您 99.9% 的时间使用的方法。如果由于某种原因你真的真的不能这样做，你需要继续将模板渲染到某个占位符元素，然后使用 DOM 修改它：

const div = document.createElement('div');
render(myTemplate, div);

div.querySelector('my-component').foo = 'bar';