Menu
I've successfully built out a site in Chrome using multiple custom components and everything works as expected.
If I run one component at a time on a demo page, it renders on Firefox. Now at the point of cross browser testing with multiple custom components and they all fail to render* when using Firefox v41. (Though 1 time rapidly refreshing got a few components to show up; fluke?)
*What I mean by fail to render is the contents in the dom show on the page, but do not appear to be projected into the shadow dom and do not inherit the styling or functions as defined in the custom components, but only inherit the styling from the index file.
How do I get multiple dom-modules to render on one page for Firefox?
error logs:
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
index file:
<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>
custom component structure:
<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>
788
Move all the link rel="import"... from index.html to a file called elements.html (including polymer.html) .Then import only elements.html into your index.html file.
If the above does not work remove the import polymer.html from your elements.html file and make sure all the */ac-*/*.html files have import statements for polymer.html.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
