Tengo una plantilla html almacenada en una variable:
const myTemplate = html` <my-component> </my-component> ` y me gustaría agregar una propiedad a myTemplate .
Algo como
myTemplate.foo = "bar"Pero esto hace referencia a la plantilla en lugar del elemento; ¿Cómo puedo aislar el elemento para modificarlo?
Para este tipo de casos, normalmente usaría una función que devuelve la plantilla.
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});Hasta donde yo sé, no puede, al menos no como lo está intentando (al menos con las API públicas).
La mejor opción sería simplemente representarlo con la opción que ya existe:
const myTemplate = html` <my-component .foo=${'bar'}> </my-component> `;Ese debería ser el enfoque que utilice el 99,9% del tiempo. Si por alguna razón realmente no puede hacer eso, debe continuar y representar la plantilla en algún elemento de marcador de posición y luego modificarlo con el DOM:
const div = document.createElement('div'); render(myTemplate, div); div.querySelector('my-component').foo = 'bar';