Polymer: to Chrome and beyond

Estela Parrado
2 min readJul 25, 2018

--

Junto con mi compañera Elena, he estado desarrollando un componente de login Polymer para iniciar sesión, y cerrarla posteriormente, a través de Firebase y el método de acceso a través de Google.

Ver el demo del componente

Cuando ya teníamos el componente todo lo funcional que hemos sido capaces -somos nuevas en esto de Polymer- nos dimos cuenta que en Chrome todo era perfecto pero, TERROR, sólo se veía en Chrome.

Estado de ánimo constante gracias a Polymer

Para solucionarlo buscamos algún polyfill que ayudase al resto de navegadores a cargar lo necesario para que el componente fuera funcional. Uno de los principales problemas que encontramos es que algunos navegadores no reconocen los html import, que son los artífices para que pueda usarse el componente en el html como si fuera un tag nativo más. El shadow DOM y los estilos encapsulados también son focos importantes del problema, ya que muchos navegadores no lo soportan y, por tanto, lo ignoran.

LA solución

Pues bien, para resolver estos problemillas utilizamos esto:

<head>
<script src=”../bower_components/webcomponentsjs/webcomponents-loader.js”>
<link rel="import" href="../element.html">
</head>

Webcomponents incluye ya algunos polyfills, en concreto este y su hermano gemelo webcomponents-lite.js, que descargan en los navegadores que no soportan ciertos aspectos de Polymer aquellos “parches” que necesitan para funcionar.

Tan simple como eso.

--

--

Estela Parrado

Front-end Developer y Diseñadora Gráfica. #Adalaber #GeneracionK en @kairos_ds