Se habla mucho sobre cómo diseñar componentes web.

Por ejemplo,http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ sugiere que puede usar la etiqueta: host para apuntar a la etiqueta del componente en sí, mientras que una hoja de estilo inyectada con, por ejemplo, h1, debe encapsular el h1 dentro del dom de sombra del componente.

Lo cual es genial, y funciona en cromo.

... pero solo funciona en cromo.

Visitar la url anterior en firefox no muestra ninguna de las elegantes demostraciones; y de hecho, de plano no funcionan en absoluto.

Entonces.

https://github.com/polymer/platform es teóricamente un polyfill que le permite usar componentes web con navegadores que no tienen soporte nativo para todas las funciones necesarias.

En teoría, esto incluye un soporte limitado para las reglas CSS, ver:http://www.polymer-project.org/platform/shadow-dom.html

Sin embargo, prácticamente hablando no funciona. En absoluto.

¿Que está pasando aqui? ¿Cómo podemos afirmar seriamente que el polyfill platform.js funciona y es compatible con navegadores antiguos cuando ustedno puede diseñar sus componentes?

La mejor solución que he visto para esto es requerir que la plantilla del componente tenga un nodo de clase raíz conocido:

<template>
  <style>
    .foo .bar {
       ...
    }     
  </style>
  <div class='foo'>
     ...
     <div class='bar'>Hi</div>
  </div>
</template>
<style>  
  .foo .bar { 
    ...
  }
</style> 

Tenga en cuenta que la hoja de estilo está duplicada tanto en la plantillay en el contexto raíz del documento; de lo contrario, los estilos firefox, safari e IE no funcionan.

¿Es este realmente el nivel en el que estamos con el diseño de componentes web?

¿Me estoy perdiendo de algo?

Realmente parece que esto es muchomucho más lejos de ser utilizable de lo que sugieren las personas, incluso utilizando las versiones más recientes de cada navegador.

Aquí hay un bolígrafo con el que he estado jugandohttp://codepen.io/shadowmint/pen/iyFxE que usa platform.js 0.3.4 y muestra cómo funciona esto solo en Chrome.