我在普通的js中成功地在Polymer和FirebaseUI中使用了Firebase-Auth SDK,现在尝试将它们一起使用(在web组件中使用FirebaseUSI)。我接近但不完全(例如造型)。
这是我的webcomponent:
<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>
我将样式信息与
相关联<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>
任何已有的更好的解决方案或我如何改进css?