मैंने कई कस्टम घटकों का उपयोग करके क्रोम में सफलतापूर्वक साइट बनाई है और सब कुछ अपेक्षित काम करता है।एकाधिक पॉलिमर वेब घटक फ़ायरफ़ॉक्स में विफल होते हैं
यदि मैं डेमो पेज पर एक समय में एक घटक चलाता हूं, तो यह फ़ायरफ़ॉक्स पर प्रस्तुत करता है। अब कई कस्टम घटकों के साथ क्रॉस ब्राउज़र परीक्षण के बिंदु पर और वे सभी फ़ायरफ़ॉक्स v41 का उपयोग करते समय * प्रस्तुत करने में विफल रहते हैं। (हालांकि 1 बार तेजी से ताज़ा करने के लिए कुछ घटकों को दिखाया गया था; फ्लूक?)
* पृष्ठ पर डोम शो में सामग्री प्रस्तुत करने में विफल होने का मेरा मतलब है, लेकिन छाया में प्रक्षेपित नहीं होता है डोम और कस्टम घटकों में परिभाषित स्टाइल या कार्यों का वारिस नहीं करते हैं, लेकिन केवल इंडेक्स फ़ाइल से स्टाइल का वारिस करते हैं।
फ़ायरफ़ॉक्स के लिए एक पृष्ठ पर प्रस्तुत करने के लिए मैं एकाधिक डोम-मॉड्यूल कैसे प्राप्त करूं?
त्रुटि लॉग:
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
इंडेक्स फ़ाइल:
<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>
कस्टम घटक संरचना:
<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>