I have an html template stored in a variable:
const myTemplate = html`
<my-component>
</my-component>
`
and I would like to add a property to myTemplate.
Something like
myTemplate.foo = "bar"
But this references the template rather than the element; how can I isolate the element to modify it?
For this kind of cases, you would normally use a function that returns the template.
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});
As far as I know, you can't, at least not how you are trying (at least with public APIs).
The best option would be to simply render it with the option already there:
const myTemplate = html`
<my-component .foo=${'bar'}>
</my-component>
`;
That should be the approach you use 99.9% of the time. If for some reason your really, really can't do that, you'd need to go ahead and render the template to some placeholder element and then modify it with the DOM:
const div = document.createElement('div');
render(myTemplate, div);
div.querySelector('my-component').foo = 'bar';