javascript - Polymer 1.0 in Ember-cli, wrong appearance -
i have managed integrate polymer 1.0 ember-cli project. brocfile
var vulcanize = require('broccoli-vulcanize'); var pickfiles = require('broccoli-static-compiler'); var mergetrees = require('broccoli-merge-trees'); var emberapp = require('ember-cli/lib/broccoli/ember-app'); var app = new emberapp({ compassoptions: { sassdir: "app/styles/main", outputstyle: 'expanded' } }); //app.import("./bower_components/webcomponentsjs/webcomponents-lite.min.js"); var polymervulcanize = vulcanize('app', { input: 'elements.html', output: 'assets/vulcanized.html', /* inline: true, strip: false,*/ excludes: [/*/^data:/, /^http[s]?:/, /^\//*/], /* stripexcludes: false, stripcomments: false, inlinescripts: false,*/ inlinecss: true }) ; var polymer = pickfiles('bower_components/', { srcdir: '', files: [ 'webcomponentsjs/webcomponents-lite.min.js', 'polymer/polymer.html' // 'polymer/polymer.js' ], destdir: '/assets' }); //bootstrap app.import('./bower_components/bootstrap/dist/js/bootstrap.js'); app.import('./bower_components/bootstrap/dist/css/bootstrap.css'); this how include everything:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>front</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="assets/webcomponentsjs/webcomponents-lite.min.js"></script> {{content-for 'head'}} <link rel="stylesheet" href="assets/vendor.css"> <link rel="stylesheet" href="assets/front.css"> <script src="assets/vendor.js"></script> <script src="assets/front.js"></script> <link rel="import" href="assets/vulcanized.html"> {{content-for 'head-footer'}} </head> <body> {{content-for 'body'}} {{content-for 'body-footer'}} </body> </html> and buttons in index.hbs
<paper-spinner active></paper-spinner> <paper-button>flat button</paper-button> <paper-button raised>raised button</paper-button> what have in result wrong rendered buttons 1 of 4/5 times.
this how looks: 
and normal: 
if im right problem in paper-material, have no idea do. 
any ideas?
i have been trying use polymer 1.0 ember last month, turns out polymer elements use insertion points not work ember.
i have spoken polymer core member , said curerntly working in interop things working should take time.
i have opened issue on emberjs repo(https://github.com/emberjs/ember.js/issues/11361), can follow there well.
try move code index.hbs in index.html instead, solve problem these elements not work under route.
Comments
Post a Comment