(tl; dr - sí. Sin embargo, Polymer 2.0 no lo es y es una actualización fácil).
Estoy tratando de migrar una base de código front-end anterior de Polymer 1.11.3 (webcomponentsjs 0.7.24) a componentes web nativos.
Sin embargo, me encuentro con el siguiente problema:
Cuando se incluye Polymer en una página, incluso los componentes web nativos triviales se rompen efectivamente . Los componentes web que no tienen métodos personalizados ni propiedades parecen funcionar. Sin embargo, incluya un método o una propiedad personalizados e intente acceder a ellos y encontrará un error que indica que la propiedad o el método no existe.
Por ejemplo, dado el siguiente componente:
customElements.define( 'x-hello', class J extends HTMLElement { hello() { console.log( 'hello called' ) } }) document.createElement( 'x-hello' ).hello()Si ejecuto esto en una página que incluye Polymer,
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="application-name" content="re"> <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="bower_components/polymer/polymer.html"> </head> <body> <h1>Here</h1> </body> <script> customElements.define( 'x-hello', class J extends HTMLElement { hello() { console.log( 'hello called' ) } }) document.createElement( 'x-hello' ).hello() </script> </html>Entonces me sale el siguiente error:
Uncaught TypeError: document.createElement(...).hello is not a function <anonymous> debugger eval code:5Sin embargo, ejecútelo en una página que no incluya Polymer y funcionará bien.
Los pocos componentes que he migrado lejos de Polymer hasta ahora fallan de la misma manera cuando se incluyen en la aplicación basada en Polymer de la que los saqué. Del mismo modo, si se ejecutan en un proyecto de prueba que no contiene polímeros, funcionan bien.
Entiendo que tanto Polymer lib como webcomponentjs estaban destinados a proporcionar soporte y funcionalidad de componentes web en un momento en que los navegadores no lo admitían, pero parece que Polymer debería al menos ser compatible con los componentes web nativos.
¿Hay una solución para esto? ¿Hay alguna forma de incorporar componentes web nativos en una aplicación que usa Polymer 1.x?
Realmente me gustaría poder migrar componentes de Polymer a uno nativo a la vez en lugar de todos a la vez.