Ember-cli中的聚合物1.0,错误的外观

问题描述:

我已经设法将Polymer 1.0集成到我的Ember-cli项目中。 这是我BrocfileEmber-cli中的聚合物1.0,错误的外观

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'); 

这我怎么包罗万象:

<!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> 

这我在index.hbs按钮

<paper-spinner active></paper-spinner> 
<paper-button>flat button</paper-button> 
<paper-button raised>raised button</paper-button> 

我有结果是错误的渲染按钮1 4/5次。

这它的外观: enter image description here

正常: enter image description here

如果林权纸材料的问题,但我不知道该怎么办。 enter image description here

任何想法?

我一直在尝试使用聚合物1.0与上个月的余烬,原来一些聚合物元素作为插入点使用不会与烬。

我已经和一位聚合物核心成员说过话了,他说他们正在一些互操作性中工作,以使事情有效,但这需要一些时间。

我已经在emberjs回购(https://github.com/emberjs/ember.js/issues/11361)上打开了一个问题,您也可以在那里跟随。

尝试将代码从index.hbs移至index.html而不是这样,这将解决问题,但这些元素在任何路径下都不起作用。

+0

Thx很多!知道它不起作用很酷。 – Costa

+0

Fwiw,当所有浏览器都实现Shadow DOM标准时,这个问题将完全消失。今天只是一个问题,因为需要填充Shadow DOM。支持Shadow DOM! –