Javascript 在Webcomponent（Polymer 2.0）中使用FirebaseUI

我在Polymer中成功地使用了Firebase Auth SDK，在普通js中成功地使用了Firebase UI，现在我尝试将其结合使用（FirebaseUSI在网络组件中）。我离得很近，但不太近（例如造型）

以下是我的网络组件：

<dom-module id="damawi-signup">
    <template>
        <style include="fb-ui-style">
        </style>
        <paper-button raised on-tap="openUi">SignUp</paper-button>
        <paper-dialog id="dialog" with-backdrop>
            <div id="fbUIContainer"></div>
        </paper-dialog>
    </template>
    <script>
        class damawiSignup extends Polymer.Element {
            static get is() { return 'damawi-signup'; }
            openUi() {
                var uiConfig = {
                    signInSuccessUrl: '/signUpSuccess',
                    signInOptions: [
                        // Leave the lines as is for the providers you want to offer your users.
                        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
                        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
                        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
                        firebase.auth.EmailAuthProvider.PROVIDER_ID
                    ],
                    // Terms of service url.
                    tosUrl: '/TOS'
                };

                // Initialize the FirebaseUI Widget using Firebase.
                var ui = new firebaseui.auth.AuthUI(firebase.auth());
                // The start method will wait until the DOM is loaded.
                ui.start(this.$.fbUIContainer, uiConfig);
                this.$.dialog.open();
            }
        }
        window.customElements.define(damawiSignup.is, damawiSignup);
    </script>
</dom-module>

报名
类damawiSignup扩展了Polymer.Element{
静态get是（）{return'damawi signup'；}
openUi（）{
变量uiConfig={
SignInsAccessUrl:“/signUpSuccess”，
签署：[
//保留要向用户提供的提供商的行。
firebase.auth.GoogleAuthProvider.PROVIDER\u ID，
firebase.auth.FacebookAuthProvider.PROVIDER\u ID，
firebase.auth.TwitterAuthProvider.PROVIDER\u ID，
firebase.auth.EmailAuthProvider.PROVIDER\u ID
],
//服务条款url。
tosUrl:“/TOS”
};
//使用Firebase初始化FirebaseUI小部件。
var ui=newfirebaseui.auth.AuthUI（firebase.auth（））；
//start方法将等待DOM加载。
start（这个$.fbUIContainer，uiConfig）；
此.dialog.open（）；
}
}
define（damawiSignup.is，damawiSignup）；

我将样式信息与

<link rel="import" href="../../src/fb-ui-style/fb-ui-style.html">

我在其中复制了firebaseui.css信息

<dom-module id="fb-ui-style">
    <template>
        <style>
          @font-face{font-family:Roboto;font-style:normal;font-weight:400;...
        </style>
    </template>
</dom-module>

@字体{字体系列：Roboto；字体样式：普通；字体重量：400；。。。

---

是否已有更好的解决方案，或者如何改进css？

看起来问题是由纸质对话框引起的。当您放入（而不是纸质对话框）时，效果很好。