Firebaseui-web: CSS style cannot be used from within a shadow root

Created on 26 Apr 2017 · 3Comments · Source: firebase/firebaseui-web

I am trying to use firebaseui-web from within a polymer element. I cannot get the styles to work within the shadow root. I believe this is because of the encapsulation that the shadow DOM provides.

http://jsbin.com/bijasiruva/edit?html,output

Perhaps this issue would be solved by https://github.com/firebase/firebaseui-web/issues/2.

In the mean time, is there any solutions to this problem?

Source

mattpalermo

👍4

Most helpful comment

Create a new file with (I called it firebaseui-style-loader-module.html)

<dom-module id="firebaseui-styles">
  <template>
    <style>
      ...copy paste firebaseui.css from dist...
    </style>
  </template>
</dom-module>

And in the shadow root where your firebaseui-auth-container is, add

<link rel="import" href="../bower_components/firebaseui/dist/firebaseui-style-loader-module.html">
<style include="firebaseui-styles">

Would be nice to have the build generate this module file.

jtborst on 26 Jan 2018

👍3

All 3 comments

Create a new file with (I called it firebaseui-style-loader-module.html)

<dom-module id="firebaseui-styles">
  <template>
    <style>
      ...copy paste firebaseui.css from dist...
    </style>
  </template>
</dom-module>

And in the shadow root where your firebaseui-auth-container is, add

<link rel="import" href="../bower_components/firebaseui/dist/firebaseui-style-loader-module.html">
<style include="firebaseui-styles">

Would be nice to have the build generate this module file.

jtborst on 26 Jan 2018

👍3

Thankyou jtborst for this. I'm sorry but I can't remember too much about polymer but this will surely be a great reference for someone (or myself) in the future.

mattpalermo on 27 Jan 2018

@jtborst you have saved me a lot of pain my friend. Kudos!!!