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: enter image description here

and normal: enter image description here

if im right problem in paper-material, have no idea do. enter image description here

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

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -