Tal vez el encabezado sea engañoso, así que describí mi problema lo más detalladamente que pude.

Tengo una clase que genera una identificación para sí misma.

 class Div { id = null constructor() { // some more data this.id = id() } onMounted() { const HTMLElement = document.getElementById(this.id) HTMLElement.style.setProperty('--custom-property', 'lol') // do some stuff } }

Luego lo renderizo en el lado del servidor (perdón por Pug):

 <template lang="pug"> .divs div( v-for="div in divs" :id="div.id" ) {{ div.data }} </template>

Después en el gancho onMounted, quiero aplicar algunas cosas generadas dinámicamente, como estilos o propiedades personalizadas (como puede ver arriba):

 setup() { const divs = [ new Div(), new Div(), new Div() ] onMounted(() => { divs.forEach(div => div.onMounted()) }) return { divs } }

El problema es que las identificaciones reales en la matriz y en el DOM son diferentes, por lo que me quedé sin definir mientras intentaba llamar a getElementById().

La razón por la que estoy haciendo esto es que estoy creando un complemento y necesito que estos bloques se representen en el lado del servidor (por razones obvias), pero necesito establecer algunas propiedades personalizadas porque el usuario final las proporcionará. No creo que haya otra manera de solucionar esto, pero estoy abierto a cualquier sugerencia. ¿Quizás es un problema común que ya está resuelto?

Tampoco tengo idea de por qué las identificaciones son diferentes, porque pensé que las clases se instanciaron una vez en el servidor, pero parece que lo hacen dos veces.