Ich habe erfolgreich eine Website in Chrome mit mehreren benutzerdefinierten Komponenten erstellt und alles funktioniert wie erwartet.Mehrere Polymer-Webkomponenten schlagen in Firefox fehl
Wenn ich eine Komponente auf einmal auf einer Demoseite starte, rendert es auf Firefox. Jetzt, wo Cross-Browser-Tests mit mehreren benutzerdefinierten Komponenten durchgeführt werden, können sie bei der Verwendung von Firefox v41 nicht mehr dargestellt werden. (Obwohl 1-mal schnell erfrischend ein paar Komponenten zu zeigen; Zufallsfehler?)
* Was ich meine von nicht zu rendern ist der Inhalt in der Dom-Show auf der Seite, aber scheinen nicht in den Schatten projiziert werden dom und erben nicht den Stil oder die Funktionen, die in den benutzerdefinierten Komponenten definiert sind, sondern erben nur den Stil aus der Indexdatei.
Wie bekomme ich mehrere dom-Module zum Rendern auf einer Seite für Firefox?
Fehlerprotokolle:
Error: DuplicateDefinitionError: a type with name 'dom-module' is already registered
TypeError: Polymer.Base._getExtendedPrototype is not a function
TypeError: Polymer.CaseMap is undefined
TypeError: this._desugarBehaviors is not a function
TypeError: this._meta.byKey is not a function
TypeError: Polymer.Base._hostStack is undefined
Indexdatei:
<html>
<head>
<link href='/css/styles.css' rel='stylesheet' type='text/css'>
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/ac-theme/color.html">
<link rel="import" href="/bower_components/ac-theme/sizing.html">
<link rel="import" href="/bower_components/ac-messagebar/ac-messagebar.html">
<link rel="import" href="/bower_components/ac-site-footer/ac-site-footer.html">
</head>
<body>
<ac-messagebar>Message bar.</ac-messagebar>
<ac-site-footer small-query="(max-width: 500px)">
<section>
<ul>
<li>
Links<br/>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</section>
</ac-site-footer>
</body>
individuelle Komponentenstruktur:
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../ac-theme/color.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../iron-media-query/iron-media-query.html">
<dom-module id="ac-site-footer">
<template>
<style is="custom-style">
:host {
/*css;*/
}
</style>
<iron-media-query
id="mq"
query="{{smallQuery}}"
query-matches="{{smallScreen}}"
on-query-matches-changed="_screenChanged"
></iron-media-query>
<div class="content-container">
<content></content>
</div>
</template>
<script>
Polymer({
is: "ac-site-footer",
properties: {
smallQuery: {
type: String,
value: '(max-width: 600px)',
notify: true
}
},
...
</script>