Question

我有这个HTML页面：

的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属性，则可以正常工作。此外，如果我更改Test.html以仅导入Person.html并仅使用该元素，则呈现正常。

似乎是从另一个中导入一个似乎打破IE 11，Firefox和Safari的元素的组合。

当然，这是一个更大的应用程序的简化示例，我在其他导入的自定义元素中使用导入的自定义元素。

我尝试过Polymer Element库提供的各种元素，它们似乎工作正常。但是，我无法看到我在我的元素中出现的错误，这些错误似乎使我的应用无法正常工作。

非常感谢任何帮助

由于

本

Answer 1

如果它适用于Chrome但不适用于其他浏览器，那么它应该是polyfill webcomponents.js的问题（您确定它存在并已下载？），还是缓存（您可以强制下载吗？）

此外，您需要一台HTTP服务器，因为HTML Imports在本地无法正常工作。

（我在IE 11和Firefox上运行3个文件没问题。）

为什么IE 11不使用嵌套的自定义元素

1 个答案: