1
私は、このHTMLページがあります。なぜIE 11は、ネストされたカスタム要素とポリマー要素をレンダリングしない
Test.htmlという
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="Greeter.html"/>
</head>
<body>
<app-greeter person="Ben"></app-greeter>
</body>
</html>
及びこれらのカスタム要素：
Greeter.html
を<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel="import" href="Person.html"/>
<dom-module id="app-greeter">
<style>
</style>
<template>
Hello, <greet-person person="{{person}}"></greet-person><br>
</template>
</dom-module>
<script>
Polymer({
is:"app-greeter",
properties:{
person:String
}
});
</script>
Person.html
<link rel="import" href="bower_components/polymer/polymer.html"/>
<dom-module id="greet-person">
<style>
</style>
<template>
<span>{{person}}</span><br>
</template>
</dom-module>
<script>
Polymer({
is:"greet-person",
properties:{
person:String
}
});
</script>
Chromeでは、これは完全に機能します。しかし、Firefox、Safari、IE 11では空白の画面が表示されます。
Greeter.htmlに、インポートでPerson.htmlを含めないように変更し、渡されたperson属性にバインドするだけで正常に動作します。また、Person.htmlだけをインポートし、その要素だけを使用するようにTest.htmlを変更すると、それはうまくレンダリングされます。
IE 11、Firefox、Safariを壊すように見えるものから、1つの要素をインポートする組み合わせのようです。
もちろん、これは他のインポートされたカスタム要素でインポートされたカスタム要素を使用しているはるかに大きなアプリケーションの単純化された例です。
ポリマーエレメントライブラリが提供するさまざまな要素を試しましたが、うまくいくようです。私は私のアプリが動作しないように見える私の要素で作っているエラーを見ることはできません。
すべてのヘルプは非常にベンはそれがChromeで動作しますが、他のブラウザでは、それはポリフィルwebcomponents.jsとのいずれかの問題であるべきでない場合（あなたはそれが存在していることを確認している
移動' '