david-minaya / tab-group Goto Github PK

El aislamiento de la barra de pestañas es importante para evitar que el estilo de la página principal interfiera con el estilo de la barra de pestañas. Con página principal nos referimos a la página que contiene la barra de pestañas.

Para aislar las barra de pestañas de la página principal se han probado los siguientes enfoques: Utilizar Web Components, utilizar la propiedad css all para restablecer los valores por defecto de todas las propiedades css y utilizar iframe. A continuación se explican los diferentes enfoques que se han utilizado y la razón por la que se han descartado algunos de ellos en favor de otros.

Web Components

Web components es un grupo de tecnologías que se utilizan para declarar nuevos elementos HTML que están parcialmente aislados del resto del estilo del documento. Decimos parcialmente porque lo estilos que se aplicar directamente a las etiquetas HTML terminan afectando los elementos se declaran dentro del Web Component. Por ejemplo, si declaramos en la página principal el background de los elementos div de color azul, también el background de los div dentro del Web Component será de color azul. Este es el comportamiento por defecto de Shadow DOM declarado en su especificación. Esta es una de las razones por la que los Web Components fueron descartados para aislar la barra de pestañas de la página principal.

Uno de los problemas que presenta utilizar Web Components es que los estilos se tienen que insertar en línea, o estos no se aplican a los elementos declarados en la barra de pestañas. Esto sucede porque webpack por defecto inserta los estilos en el head de la página principal, y los Web Components están aislados de estos estilos, a menos que sean heredados. Pero, utilizar estilos en línea trae consigo otras complicaciones, las cuales se detallan mejor en este articulo.

Otras de las razones por la que se descarto el uso de Web Components es porque complica el manejo de eventos en los componentes de React. Esta pregunta en Stack Overflow y este issue en el repositorio de React explican mejor el problema.

Propiedad css all

La propiedad css all reestablece los valores de todas las propiedades css, por lo que los elementos que la utilicen tendrán el estilo por defecto definido por el navegador. Este enfoque se utilizo hasta el commit 31a239d para aislar el estilo de la barra de pestañas, pero fue descartado porque en ciertas ocasiones los estilos de la página principal lograban penetrar a los elementos declarados en la barra de pestañas. Este problema pasaba, por ejemplo, al abrir la barra de pestañas en Stack Overflow. La opción Agregar de la barra de pestañas adquiría el mismo estilo que tenían los botones de la página.

Uno de los problemas que presenta tanto este enfoque, como el primero, es que ambos insertan el estilo de la barra de pestañas en la página principal. Esto puede terminar trayendo problemas de conflicto. De modo que los estilos de la extensión terminen interfiriendo con los estilos de la página principal o que los estilos de la página principal terminen interfiriendo con los estilos de la extensión (como ya había sucedido anteriormente). Este problema ocurre aunque se inserten los estilos en línea en cada elemento, o en el elemento principal de la barra de pestañas. Ya que, aunque los estilos declarados en la extensión se inserten en línea, lo estilo de librerías de terceros, como UI Fabric, se siguen insertando en el head de la página principal.

Por estas razones, estos dos enfoques han sido descartados en favor del próximo.

iframe

iframe es un elemento web que anida un nuevo documento en el documento de la página principal. Este documento esta totalmente aislado del documento de la página principal. Por lo que los estilos de la página principal no tienen forma de interferir con los estilos declarados en el iframe, y viceversa. Otra ventaja que presenta el uso de iframe es que como es un documento totalmente aislado, todos los estilos de barra de pestañas están contenidos en este. Esto nos permite utilizar el comportamiento que tiene por defecto webpack con los estilos. El siguiente articulo y la siguiente pregunta explican como utilizar iframe en content-script, que es lo que se utiliza para crear la barra de pestañas.

Una de las desventajas que presenta el uso de iframe es el tiempo que demora en cargarse la primera vez. Esto ocurre porque los elementos iframe comienzan a cargarse después de que todos los recursos de la página han terminado de cargarse. Pero este problema solo ocurre la primera vez que las diferentes páginas de la barra de pestaña son abiertas. Después de eso, la velocidad de carga del iframe mejora, llegando al punto, en el que el usuario no se da cuenta de cuando la barra de pestañas es cargada.

Por estas razones iframe ha sido elegido como el método de aislamiento de la barra de pestañas.