I have successfully built the site in Chrome using several custom components, and everything works as expected.
If I run one component at a time on a demo page, it displays in Firefox. Now at the point of cross-browser testing with several custom components, and all of them cannot display * when using Firefox v41. (Although 1 time quickly refreshing received several components to show fluke?)
* What I mean when rendering is unsuccessful is the content in the dom show on the page, but does not seem to be projected into the shadow dom and does not inherit the style or functions defined in the user components, but only inherits the style from the index file.
How to get multiple dom-modules for rendering 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>
structure of custom components:
<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 { } </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>
source share