Aplicación de estilos a elementos insertados con InnerHTML en Polymer

Tengo un elemento que contiene el contenido del elemento y quiero formatearlo y la única manera que funciona es cambiar InnerHTML. Sin embargo, la hoja de estilo local no se aplica al contenido modificado. ¿Cómo arreglar eso? Esta es la parte del código de un elemento personalizado creado con Polymer:

Polymer({ attached: function() { this.querySelector(".post-body").innerHTML = this.format(this.querySelector(".post-body").innerHTML); }, format: function(text) { return text.replace(/\n(.+)\n/g, "

$1

"); }, });

En este ejemplo, obtengo el formato correcto, pero mis estilos de hoja de estilo no se aplican al elemento P que contiene. ¿Hay alguna forma de arreglarlo como volver a aplicar estilos a la página o a cualquier otra cosa?

Después de actualizar el HTML, this.updateStyles() .

https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-api

st_efan parece haber dado en el clavo con el had en otro hilo: https://stackoverflow.com/a/32306440

Su solución es usar la API DOM de Polymer nativa para lograr esto.

Estaba teniendo el mismo problema que usted describe: podría obtener mi información para estampar, sin embargo, nunca se estilizaría. Llamar a this.updateStyles() no resolvió mi problema, ya que parecía que el método que estaba usando para estampar no aplicaba el innerHTML en un método polimérico.

En mis ejemplos, estoy usando el siguiente CSS para el estilo:

 p { font-weight: bold; color: red; } 

En su publicación original, está utilizando la API de DOM del polymer. Sin embargo, para cualquier otra persona que lea, no es tan obvio. Los sellos de datos son los esperados usando lo siguiente:

 var html = "

This is a test

"; this.$.myElementId.innerHTML = html;

Sin embargo, el uso de este método nunca permitirá que el estilo de CSS aplicado a un elemento de polymer surta efecto en el interior de HTML. El método sugerido por Zikes debería funcionar en algunos contextos, sin embargo, creo que solo aplica propiedades personalizadas establecidas a través de host y mixins . Lo siguiente no funciona en mi prueba.

 var html = "

This is a test

"; this.querySelector("#myElementId").innerHTML = html; this.updateStyles();

La solución que termina trabajando en mi prueba, y parece ser el método apropiado para configurar el innerHTML es a través de Polymer.dom :

 var html = "

This is a test

"; Polymer.dom(this.$.myElementId).innerHTML = html;

En este ejemplo final, no hay necesidad de llamar this.updateStyles(); .